- This topic has 11 replies, 3 voices, and was last updated 1 year, 5 months ago by
Tom.
-
AuthorPosts
-
September 10, 2019 at 7:22 am #1005728
Anders
Can you change the image (the two images side by side) so that they are not called via CSS – but via html, so that lazyload works correctly on the image…
But keep the design?
September 10, 2019 at 12:04 pm #1006090David
StaffCustomer SupportHi there,
is that content being generated by a plugin?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 10, 2019 at 1:36 pm #1006131Anders
No, just html/css..
Now I have changed the left image to “normal” html, and the right is loaded from CSS.
I wan’t the left image, to behave like the right one.. ( when scaling up and down – responsive)
But I can’t figure out the css
September 10, 2019 at 4:44 pm #1006262Tom
Lead DeveloperLead DeveloperHi there,
Both seem to be using background images still.
Basically, you want a container with the image and text inside of it:
<div class="image-container"> <img src="URL TO IMAGE" /> <span class="image-text">Your text here</span> </div>
If you can set that structure up, we can help with the necessary CSS.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 11, 2019 at 11:59 am #1007092Anders
Awesome π
I have set it up… π
September 11, 2019 at 2:55 pm #1007182Tom
Lead DeveloperLead DeveloperGive this CSS a shot:
.image-container { position: relative; } .image-container .image-text { position: absolute; left: 0; bottom: 10%; background: #222; color: #fff; padding: 10px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 12, 2019 at 10:32 am #1007973Anders
Thx.
The headline works fine, but the image does not resize on mobile / tablet.
Thats the tricky part π
September 12, 2019 at 6:06 pm #1008266Tom
Lead DeveloperLead DeveloperThe image looks good to me as I size down the page. Is there a specific width I should be looking at?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 13, 2019 at 7:44 am #1008639Anders
The right one changes image height on mobile, and also has a minimum height to it when scaling down
September 13, 2019 at 9:20 am #1008818Tom
Lead DeveloperLead DeveloperThat’s because the right one is still a background image. Background images behave differently to static images (which the left column is now). Are you wanting the static image to behave like the background image?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 13, 2019 at 9:27 am #1008828Anders
Are you wanting the static image to behave like the background image?
Yes, that was the idea – so the lazyload works.
September 13, 2019 at 3:25 pm #1008969Tom
Lead DeveloperLead DeveloperYou could try this:
.image-container img { object-fit: cover; height: 100%; } .image-container { position: relative; height: 180px; overflow: hidden; min-height: 180px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.