End-to-end cover image

Home › Forums › Jevelin Theme › End-to-end cover image

Home › Forums › Jevelin Theme › End-to-end cover image

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    NOT RESOLVED Posts

  • admin_lancr
    Participant

    Hello,

     

    I want to implement a cover image on my WordPress page, but can’t seem to make the image stretch from end-to-end from both sides of the screen and adjacent to the menu bar (see image attached). My margins are all set to zero, so I don’t know what the problem is.

     

    Any solution?

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @admin_lancr,

     

    I hope you are well today and thank you for your question.

     

    To achieve this you have to make that whole page full width which contains the image.

     

    We can do this developing custom CSS code.

     

    Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

     

    Best regards,
    Shufflehound team

    admin_lancr
    Participant

    Hi,

     

    Thank you for the reply.

     

    The URL is http://www.lancr.eu/products-and-promotions/test-page/. The layout I want should be replicated on multiple pages.

     

    Kind regards,

    admin_lancr

    Shufflehound Support
    Moderator

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .page-id-8650 .sh-section-container.container,
.page-id-8650 .container.entry-content {
    width: 100% !important;
    max-width: 100% !important;
}

     

    To use it on multiple pages, just copy the shared code and replace 8650 with the page ID that you want to make full width.

    admin_lancr
    Participant

    It worked, thanks!

     

    How do I get rid of the whitespace between the image and the header?

     

    Kind regards,

    admin_lancr

    Shufflehound Support
    Moderator

    To get rid of the whitespace between the image and the header you can use the below custom CSS code.

     

    .page-id-8650 .fw-page-builder-content .sh-section {
    padding-top: 0;
}

.page-id-8650 #wrapper .content-container.sh-page-layout-default {
    padding-top: 0;
}

    admin_lancr
    Participant

    I got rid of the whitespace, thanks.

     

    I adapted the first CSS code to use it on another page. The page became full width, but the cover image did not become end-to-end as in the first page. This is the page I’m struggling with:

     

    http://www.lancr.eu/products-and-promotions/promo-template/

     

    Do you know what’s wrong?  I used the following code:

     

    .page-id-8728 .sh-section-container.container,
    .page-id-8728 .container.entry-content {
    width: 100% !important;
    max-width: 100% !important;
    }
    .page-id-8728 .fw-page-builder-content .sh-section {
    padding-top: 0;
    }

    .page-id-8728 #wrapper .content-container.sh-page-layout-default {
    padding-top: 0;
    }

    Shufflehound Support
    Moderator

    This is happening because the image on that page is smaller.

     

    You can compare the sizes of both the following images.

     

    http://www.lancr.eu/wp-content/uploads/2017/10/eau-de-parfum-1.png

     

    http://www.lancr.eu/wp-content/uploads/2017/10/Template-cover-image-Lancr.png

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)