- This topic has 15 replies, 3 voices, and was last updated 4 years, 3 months ago by
Tom.
-
AuthorPosts
-
April 29, 2016 at 12:57 am #190245
Corinne
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,
CorinneApril 29, 2016 at 10:17 am #190400Tom
Lead DeveloperLead DeveloperHi 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-developmentMay 2, 2016 at 1:12 am #190915Corinne
Hi,
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,
CorinneMay 2, 2016 at 9:19 am #191088Tom
Lead DeveloperLead DeveloperAh, 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-developmentMay 3, 2016 at 7:23 am #191330Corinne
In 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?May 3, 2016 at 10:46 am #191370Tom
Lead DeveloperLead DeveloperIf 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-developmentMay 3, 2016 at 1:02 pm #191388Corinne
I feel stupid but it doesn’t work…
I have used : <body background=”image.png”></body>. It’s not correct?May 3, 2016 at 3:04 pm #191418Tom
Lead DeveloperLead DeveloperIf 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-developmentMay 4, 2016 at 1:18 am #191543Corinne
Actually, 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 π
May 4, 2016 at 10:30 am #191741Tom
Lead DeveloperLead DeveloperAh, 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-developmentSeptember 20, 2016 at 8:50 am #228032Lisa
Hi 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,
LisaSeptember 20, 2016 at 10:05 am #228073Tom
Lead DeveloperLead DeveloperNot 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-developmentSeptember 20, 2016 at 10:25 am #228074Lisa
Thanks. Is it possible to add a height limit to the code as well?
September 20, 2016 at 10:39 pm #228184Tom
Lead DeveloperLead DeveloperThe 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-developmentSeptember 21, 2016 at 11:10 am #228366Lisa
Okay. Thanks!
Lisa
-
AuthorPosts
- You must be logged in to reply to this topic.