Responsive Images on Hello Lovely Homepage
EMILY HUNSAKER asked 5 years ago
Is there a way to make images responsive to the size of the content blocks in the “Home Flexible” widget of Hello Lovely? I have placed linked images on the homepage using this code in the widget:
<a href=”image link”>
<img style=”width: 100%; height: 100%; max-width: 300px” src=”image src” alt=”DIY Projects” /></a>
The photos look great on my computer screen but they’re huge on a mobile device — they fill the entire screen. Is there a way to keep the images within the confines of the content blocks while on a mobile device?
Here is my site URL for reference: http://www.hunnyimhomediy.com.
Jennifer Staff answered 5 years ago
They are already mobile responsive. They go from 4 across, to 2, to 1 on smaller screens which is why they are larger. You can remove the mobile code if you would like them to stay 2 across by using this in your additional CSS spot. Or change that 50 t0 25% and they will stay 4 across.
@media only screen and (max-width: 600px) {
.lovely-home .four-widgets .widget {
width: 50% !important;
}
}
You could also use a custom HTML widget, and not have the added box around each image. Let me know if you need any help.
Please login or Register to submit your answer