- This topic has 22 replies, 4 voices, and was last updated 3 years, 5 months ago by Leo.
-
AuthorPosts
-
November 6, 2020 at 8:31 am #1520738ken
Hi,
I am trying to size my hero image such that it’s responsive for all sizes > 1024px. My image size is 1920px*307px, the width is corretly displayed from 2000px but from ~1520px it starts to be reduced. From the various posts that I read and testing myself I think it might have something to do with the height? Padding? How do i set them correctly? I want the image to be full width throughout all the screen sizes.
If it helps to look at the site, feel free.
Thanks!
November 6, 2020 at 9:49 am #1520850LeoStaffCustomer SupportHi there,
Sorry, which image are you referring to here?
The big image on the front page?
November 7, 2020 at 12:03 am #1521350kensorry, i am refering to the hero/banner image (with the word about on it) in this page .
November 7, 2020 at 5:22 am #1521550DavidStaffCustomer SupportHi there,
edit the Header Element, change the top padding to
15%
Then set the background position toCenter Center
15% is the aspect ratio of the original image.
ie.210px (H) / 1324px (W) * 100 = 15%
November 8, 2020 at 1:04 pm #1522994kenHi there,
I am not sure what happened but I couldn’t see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn’t see my hero image anymore.
Can you tell me what happened?
November 8, 2020 at 1:36 pm #1523008ElvinStaffCustomer SupportHi,
I am not sure what happened but I couldn’t see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn’t see my hero image anymore.
Can you tell me what happened?
I don’t see any
<div class="page-hero">
(Header Element) in your page.Perhaps you’ve changed the Display Rule location or accidentally trashed it?
Can you verify? Thanks.
November 9, 2020 at 1:41 am #1523420kenHi Elvin,
I checked the Display Rule location and it’s set to page and the foundation (which is the name of that page).
November 9, 2020 at 7:46 am #1524068DavidStaffCustomer SupportDo you have any other Header Elements ?
November 10, 2020 at 12:33 am #1524881kenHi David,
No.
November 10, 2020 at 3:10 am #1525038DavidStaffCustomer SupportDoes the Header Element contain any content ?
If it doesn’t then add a HTML Comment like so:<!-- page hero -->
This won’t display on the frontend but will force the hero to be displayed.
November 10, 2020 at 7:06 am #1525485kenIt’s working now. Thanks! However, the image i inserted has pink color on the side, I am not seeing them anymore. Could you advice on how to scale it such a way that the whole inserted picture in shown?
Thanks!
November 10, 2020 at 8:33 am #1525595DavidStaffCustomer SupportRemove the bottom padding. So you only have 15% top padding.
November 10, 2020 at 10:05 am #1525751kenit works thanks!
November 10, 2020 at 10:54 pm #1526272kenHi David,
I applied the same thing to the other pages but the header isn’t showing up for some reason, can you help?
November 11, 2020 at 12:05 am #1526317DavidStaffCustomer SupportDid you resolve this? I am see Header Elements on most of the site now.
-
AuthorPosts
- You must be logged in to reply to this topic.