trying to get resize of images to fit mobile

Tagged: 

Author Posts

garyclouis August 6, 2018 at 2:39 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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

Sebastian August 6, 2018 at 1:49 pm

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 August 6, 2018 at 6:45 pm

Image at top of page – header

Woo Themes Canvas theme

Microthemer Version 5.2.3.4

Need anything else??

garyclouis August 6, 2018 at 6:45 pm

https://aprillouis.com/

need logon?

Sebastian August 7, 2018 at 9:11 am

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.