-
Posts
-
Hi — I’m adapting some elements for mobile but the CSS in the documentation doesn’t seem to work for me. I’ve reduced it down to the simplest of requests below (in custom.css) but all the images still show up on mobile browsers:
@media only screen and (max-width: 767px) { img { display: none !important; } }Hey benrroberts!
Thanks for reaching out to us!
Could you please provide a link to your site and login details if possible so we can have a closer look. You can place the details in the Private Content section of your reply.
Cheers!
JordanHi Jordan,
I’d prefer to fix it myself unless I need a last resort. I think the initial issue was due to caching or the like as after a couple of hours the images had disappeared. Well every image on the page except the colour section background which is what I want removed & I guess isn’t captured under the img tag?
So I modified the code to try to achieve the removal of just the colour section background per the below, where I’ve named the colour-section as ‘background-image-responsive’ but it hasn’t worked (and other images returned so I know the code has processed). Any ideas for me?
@media only screen and (max-width: 767px) { .background-image-responsive { display: none !important; } }
Hi!
Can you please post the content of your custom CSS here using http://pastebin.com/ so we can check if you have error in your custom CSS?
Also, can you please post the link to your website and point out the image you would like to remove?Regards,
YigitHi!
you are talking about the “From Hasty to Tasty” image, right? use this code instead:
@media only screen and (max-width: 767px) { #background-image-responsive { display: none !important; } }Best regards,
Andyno, use this one instead please:
@media only screen and (max-width: 767px) { #background-img-responsive { display: none; }}Cheers!
AndyHi Andy,
Thnaks – that indeed made the background hasty-to-tasty image stop displaying!
If I want to now display a separate background image there for mobile devices should I use ‘ content:”url” ‘ instead of ‘ display: none ‘ or is there a better way to do this?
Thanks,
BenHey!
You can refer to this thread to display different elements on mobile and on desktop – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Best regards,
YigitHi Yigit,
The referred thread doesn’t really add anything here — I’d already hid the background image with Andy’s code above. I’d actually like to have the ability to replace the background image of a colour section with another image for mobile (as the text is cut off otherwise). I’m worried this isn’t fully possible so interested in your thoughts, as currently when the mobile image version displays it has removed the button that sits in that colour section for desktop.
Here’s my set-up on the homepage in WP:
Desktop = colour section w/ From Hasty to Tasty graphic + a button inside it
Mobile = if I run below in CSS I get a replacement image but no button.@media only screen and (max-width: 767px) { #background-img-responsive { content:url(“https://gastronoms.com.au/wp-content/uploads/newimage.jpg”); } }
I’d like to know if possible a) if I can replace the image in mobile AND have the button remain & b) whether the content:”url” code is best practice?
Ben
Hi,
I’m not sure if I understood your problem correctly or not but could you try to create another section to show for mobile only? You can then give your sections IDs and hide/show the correct one using CSS:
@media only screen and (max-width: 767px) { #desktop-section { display:none !important; } } @media only screen and (min-width: 768px) { #mobile-section { display:none !important; } }Thanks,
Rikard
- The topic ‘Mobile responsiveness CSS not working’ is closed to new replies.