trying to get resize of images to fit mobile

Author Posts

garyclouis

demos on fluid images do not follow what shows up. canvas WooThemes theme


Sebastian

Hey,

Would you mind sending me a link to the page you’re working on so I can troubleshoot. And provide some directions on exactly which image you’re trying to adjust for mobile with Microthemer?

Thanks!
Sebastian


garyclouis

Image at top of page – header

Woo Themes Canvas theme

Microthemer Version 5.2.3.4

Need anything else??


garyclouis

https://aprillouis.com/

need logon?


Sebastian

Thanks, no need for login with this issue. I can see how you need to style the image just by visiting the link you posted.

The header image is a background image, applied to the #header div element. And so its fluidity needs to be set via the background-size property on the Background property group. Your theme already sets the background-size to cover on mobile devices, which is what you want. But the padding-bottom of 280px is a bit too much on mobile. Setting it to around 90px should reveal more of the image.

I see you have already created a custom selector in Microthemer. If you click its name in the top toolbar you can change the selector to #header. And then set the bottom padding to 90px via the Phone tab. You can remove the other styles you added.

Or, you can delete your current selector and create a new one in targeting mode by clicking on the header image.

Does that make sense?

Cheers,
Sebastian

You must login or register to reply to this topic.