Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 16, 2020 at 6:49 pm #1175157
    marcoabis81

    Hello,
    I would like to achieve something similar to this https://www.screencast.com/t/WISwWoaopH from page https://www.omio.com/travel

    Starting from the idea they have overlapped an image between 2 colors sections, how can I achieve the same on my page https://www.ninserviziogratuito.co.uk/confronta-treni-autobus-e-voli

    Second question regarding images. On the same page https://www.ninserviziogratuito.co.uk/confronta-treni-autobus-e-voli the picture with the train is fully visible on desktop, while it is cropped on mobile view https://www.screencast.com/t/KOjPCiXOt

    How can I have the pic resizing on mobile view?

    Thanks,
    Marco

    January 16, 2020 at 7:11 pm #1175161
    Jordan Shannon

    Hey marcoabis81,

    For question #1 first add this to quick css:

    #after_section_1 .container{
    top: -100px!important;
    position: relative!important;
}

    Best regards,
    Jordan Shannon

    January 16, 2020 at 8:04 pm #1175174
    marcoabis81

    Hi Jordan,

    is this code going to affect all pages? how is this code referring to this specific page?

    Thanks,
    Marco

    January 17, 2020 at 12:07 pm #1175325
    Mike

    Hi,
    If you would like the code to affect only one page please add the “page ID” to the css like this:

    #top.page-id-8197 #after_section_1 .container{
    top: -100px!important;
    position: relative!important;
}

    Best regards,
    Mike

    January 17, 2020 at 12:36 pm #1175339
    marcoabis81

    Thanks Mike,
    added and it works :-)

    Could you also please check my second question about the banner resizing for mobile view? or is it simply a different pic?

    This is what I cannot understand. The size of the images on all elements 1/1 pic 1/2 pic 2/5 pic etc.

    They all are different.

    I thought that the best way to understand what the size of an image must be is by checking the actual size of the resizing that WP applies to specific element sizes in pages. Is that correct?

    Thanks
    Marco

    January 17, 2020 at 2:01 pm #1175410
    Mike

    Hi,
    Your train image is too long for it to show well on mobile because when it is forced to fit it is then too narrow, try testing this css to see what I mean:

    #top.page-id-8197 #av_section_1{
        background-size: contain !important;
}

    For tablet this css would work for you if we move the title up a little.
    But for mobile, I recommend manually cropping your image and using css to show.
    Try uploading the two images in the Private Content area and then change the url in this css one at a time and test on mobile, feel free to create your own cropped mobile image, these are only examples to get you started.

    @media only screen and (max-width: 767px) { 
	#top.page-id-8197 #av_section_1{
background-image: url(https://test.test/mobile1.jpeg) !important; 
background-size: contain !important;
}
}

    Best regards,
    Mike

    January 18, 2020 at 6:08 pm #1175882
    marcoabis81

    Hi Mike,
    I cropped the pic and used your CSS. Thank you so much, it worked perfectly :-)

    Regards,
    Marco

    January 18, 2020 at 9:24 pm #1175908
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Overlap image between 2 elements or 2 color sections’ is closed to new replies.