- This topic has 15 replies, 3 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
Hi Tom,
I’m using the sections addon (which is great by the way :-)) and have inserted images in some sections.
But when the screen becomes smaller, they are not responsive (as they can be in the page header) and are cut from the right side.Is there a way of making images responsive in sections?
Thanks,
CorinneLead Developer
Hi there,
They should be responsive – can you link me to the page?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi,
Here is the site : cpa-etudes.fr
On the homepage the image is in the page header. On the other pages they are in the first section (as I wanted to insert text above the image and couldn’t manage to do so with the page header)
Thanks,
CorinneAh, well background images and static images behave differently when resizing the browser/being on mobile.
One thing you can do for the section backgrounds is center them:
.generate-sections-container { background-position: center center; }Adding CSS: https://generatepress.com/knowledgebase/adding-css/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentIn that case, I think I’ll prefer to place them in the page header.
Just to make sure I didn’t miss anything : I didn’t manage to write the title above the image in the header, could you confirm it’s not possible? Is there a way to do so?If you add the image using HTML into the content section of the page header then you can add whatever you want above the image.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentI feel stupid but it doesn’t work…
I have used : <body background=”image.png”></body>. It’s not correct?If I’m understanding correctly, you would add this into the “Content” box of the Page Header section:
<h1>Your title here</h1> <img src="THE URL TO YOUR IMAGE HERE" alt="" />Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentActually, I would like my title to be on the image (sorry for my english, maybe “above” was not the correct word…).
To synthesize, what I would like is :
– to have my image in the first section or in the page header
– with the title being on the image (like if the image was in the background)
– and the image being responsive when resizing the browser or being on mobile (and not being cut from the right side)Thanks again 🙂
Ah, well then you’re really better off using the image as a background image.
Alternatively you could add your title to the image using Photoshop or something similar, but that’s not great for SEO.
You’ll run into all kinds of nightmares positioning text on top of an image, especially if you want it to be responsive.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi Tom,
I’d like to have the background images (page headers) on a few pages on my website resize on mobile so that it’s possible to see the entire image and not just the center of it. Is there a code or anything that makes that possible?
Thanks,
LisaNot easily I’m afraid, backgrounds images aren’t responsive by nature.
One thing you can try is adding this CSS:
@media (max-width: 768px) { .generate-content-header { background-size: contain; } }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks. Is it possible to add a height limit to the code as well?
The height of the image?
Contain will keep the images height, but keep the aspect ratio to the width of the element.
I’m not aware of any good ways to change the background images height.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOkay. Thanks!
Lisa
- You must be logged in to reply to this topic.