- This topic has 11 replies, 3 voices, and was last updated 3 years, 4 months ago by
Tom.
-
AuthorPosts
-
September 10, 2019 at 7:22 am #1005728
Anders Nielsen
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?
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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 Nielsen
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
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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 Nielsen
Awesome π
I have set it up… π
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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 Nielsen
Thx.
The headline works fine, but the image does not resize on mobile / tablet.
Thats the tricky part π
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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 Nielsen
The right one changes image height on mobile, and also has a minimum height to it when scaling down
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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 Nielsen
Are you wanting the static image to behave like the background image?
Yes, that was the idea – so the lazyload works.
This is my sites: https://www.generaliseret-angst.dk/
https://www.angst.dk/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.