[Resolved] Hero slider and hero images

Home Forums Support [Resolved] Hero slider and hero images

Home Forums Support Hero slider and hero images

  • This topic has 5 replies, 2 voices, and was last updated 4 years ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1209160
    Davood

    I’m having two problems with the hero slider and images.

    1) When setting the full width option the slider (on homepage) and images (on inside pages) do not appear full width on all computer screens. On my coworkers MacBook Pro they are full width, while on my iMac they are not. How can I fix this?

    2) I need the homepage hero slider and inside pages hero images to be the same height. How can I accomplish this?

    We are using the Luxedo site layout by FlixFrame from the elementor section of site library page.

    Thank you in advance.

    #1209455
    David
    Staff
    Customer Support

    Hi there,

    1. The Site is a contained site which has a Customizer > Layout > Container width of 2000px. You’re slider image is around 1920px hence on the larger screens it doesn’t extend to the edge of the container. You could use a wider image or simply reduce the container width to suit the image.

    2. They look pretty close – and you’re using % padding which is the way to size them responsively. I think we could be dealing with a decimal point on the % difference. Which would require some CSS.

    eg.

    .page-hero {
        padding-top: 14.5%;
        padding-bottom: 14.5%;
    }
    #1209468
    Davood

    Thanks David,
    For the first question, is that the problem with all the images, are they smaller than the width of my iMac?

    For the second question, I do not think you understood the question… we want all pictures to be the exact same height at all times. Right now I have the settings set to the default settings. I am asking what I need to change to make sure the images are the same height at all times.

    #1209517
    David
    Staff
    Customer Support

    1. If you’re on a 27″ imac then the native default resolution is 2560px. So the there are two things:
    a. The Customizer > Layout > Container –> Width is set to 2000px.
    so the entire sites content will never span to the edges of the screen.

    b. The images in the Slider are only 1920px.
    So the actual slider images will never actually fill the Content area.

    As the site was designed around a maximum width of 2000px i would not suggesting increasing a. but actually reduce it to 1920px so at least your widest images reach the container edges.

    2. The internal pages uses the Header Element:
    https://docs.generatepress.com/article/header-element-overview/

    The height of which is defined by the top and bottom padding plus any HTML in the header elements content. So are you wanting the header element to be a fixed height ? No matter what the screen size?

    #1209541
    Davood

    Forget about the images that are there… they are all temp.
    In #1 I am asking when we use an image that has a width of 2600 or greater how can we guarantee that it will be full width on ALL screens.

    In #2 I am asking how we make the homepage hero slider AND the internal pages hero images all the same height. Yes, we want the pictures to all be a fixed height and we want the height to match the slider height. That is my understanding from the client.

    #1209746
    David
    Staff
    Customer Support

    1. If you want the content to always extend to the edges of the screen then you need to set the Content to Full Width for those pages. You can do this using the Layout Element:

    https://docs.generatepress.com/article/layout-element-overview/

    And selecting the Content tab to choose full width:

    https://docs.generatepress.com/article/layout-element-overview/#content-1

    Then you need to set the Display Rules to the Front Page and Pages > All Pages this will make sure the Blog and single posts are not affected.

    2. I think for your needs it may be easier if you remove the Header Element that is assigned to the Pages and add your images to those pages in the Elementor editor – then you can set the sizes etc you need.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.