1

i want to hide the right module from the mobile device, i have used several techniques but no one work for me. This is my website http://www.healthliteracyhub.com

i have used this template http://globbersthemes.com/livedemo/hurlington

|improve this question
  • I have used several techniques but no one work >>> Could you please mention these techniques? – Lodder Oct 26 '15 at 8:34
-1

In /yourtemplate/css/custom.css add the following code

@media (max-width:480px) {
#left ul li:before, #right ul li:before {
display: none !important;
}
}

Change the "480px" to whatever size you need this to be hidden from. If you want to hide this on all resolutions you can use the following code

#left ul li:before, #right ul li:before {
display: none !important;
}
|improve this answer
  • This has no impact what so ever, nor are you targeting mobile devices – Lodder Oct 26 '15 at 14:36
  • Sorry I didn't realise that you wanted to hide from mobile, I tested the above code on your site and it worked my end. If it didn't work in your custom.css then you could try adding into the templates css in your case is style.css and use the @media (max-width:480px) to hide from mobile. However that is not ideal because if you update the template it will be overwritten. – gringo211985 Oct 26 '15 at 22:36
2

It doesn't look like the template developer has much documentation on their website.

This template does not appear to use bootstrap.

Try adding these lines to the /templates/hurlington/css/style.css file:

@media only screen and (max-width: 720px) {
  #right {display: none;}
}

Or ask the developer for help (there's a contact and support link in the footer of the developer website).

|improve this answer
  • 2
    I looked at the css files and there really doesn't seem to be a ready class for hiding modules in mobile. There is a responsive.css file though and the code should be added there. There is already a media rule for it, so that can be skipped. And generally it would be better to make it a class rule and then add the class to the module, but meh, if you only need it for one module... – Ville Niemi Oct 26 '15 at 11:48
  • 1
    The following code worked for me thank you so much for the support @media only screen and (max-width: 720px) { #right {display: none;} } – Amirali Panjwani Oct 26 '15 at 12:15
  • Please help me in removing arrow icon from the right hand side module .. healthliteracyhub.com/index.php/blogf – Amirali Panjwani Oct 26 '15 at 12:53
  • @AmiraliPanjwani - I would probably change 720px to 767px instead, as this is the standard – Lodder Oct 26 '15 at 14:38
  • 720px is not standard but is the correct break point for this template. See /templates/hurlington/css/responsive.css for details – Neil Robertson Nov 19 '15 at 22:23
2

You could create a new module class for this in /yourtemplate/css/custom.css (if you don't have that file create a new one) with something like,

.myclass {
display: block;
}

and then to hide on mobile

@media (max-width:480px) {
.myclass {
display: none;
}

I forgot to mention, this method will allow you to hide any module from displaying on mobile, just use the class on each module you want to hide.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.