Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 24, 2015 at 12:08 pm #492113
    gjelsvik

    We have a CTA plugin and use that inside 1/3 content box that is placed beside a 2/3 content box.

    the 2/3 is showing a picture, the 1/3 is showing the CTA text and button.

    On ipad the 1/3 is not wrapping correctly. It displays underenath other content on out site. See attached screenshot.

    Unscaled:

    1953854
    scaled:
    1953854
    [url=http://bildr.no/view/RzE0ekNi][img]http://bildr.no/thumb/RzE0ekNi.jpeg[/img][/url]

    When we resize to even more narrow browser window, (phone mode) it shows up OK.

    • This topic was modified 9 years, 3 months ago by gjelsvik.
    August 25, 2015 at 5:23 am #492603
    Ismael

    Hi gjelsvik!

    Thank you for using Enfold.

    I tried to check the screenshot but it’s too small: http://bildr.no/thumb/YktQVFlp.jpeg

    The cta widget has an inline styling which sets the height to 300px. You can set the height to auto on smaller screens:

    #wp_cta_272_variation_0 {
    height: auto !important;
}

    Best regards,
    Ismael

    August 25, 2015 at 7:03 am #492642
    gjelsvik

    Ah, seems that my link was wrong. If you remove the /thumb/ part of the url, you get the full size Picture. But i also provided a link to the actual site in the private info.
    I changed the height to auto; Now it doesnt get displayed behind other elements, but I still dont like how it behaves when i resize the browser window. I gets very narrow, and high. Ideally the text size and everything should get smaller..

    August 26, 2015 at 5:33 am #493296
    Rikard

    Hey,

    You can try adding the following CSS to Quick CSS to control at what pixel width the containers will display at 100% of the screen width, please edit the value 1024 to fit your liking:

    @media only screen and (max-width: 1024px) {
.page-id-334 #av_section_1 .av_two_third, .page-id-334 #av_section_1 .av_one_third {
width:100% !important;
}
}

    Thanks,
    Rikard

    August 26, 2015 at 3:03 pm #493570
    gjelsvik

    Thanks. We have it working now :)

    Also We want the padding-botom to be 0px; so that the we show alongside the CTA is sitting on top of the next element, not 50px above.

    I have tried adding this in the Quick-css, but it doesnt have any effect

    #main.content, .sidebar{
padding-bottom:0px;
}

    I Guess Im doing something wrong, but it works if I do it in Chromes Developer tools

    August 26, 2015 at 4:02 pm #493646
    Yigit

    Hi!

    Please try adding !important rule as following 

    #main.content, .sidebar{
padding-bottom: 0 !important ;
}

    Cheers!
    Yigit

    August 27, 2015 at 9:05 am #493965
    gjelsvik

    still not taking affect.

    I also added “px” behind the 0 to Your code, but it doesnt change anything.

    #main.content, .sidebar{
padding-bottom: 0px !important ;
}
    August 28, 2015 at 4:54 am #494606
    Ismael

    Hey!

    I checked the page but I don’t see the form any more. Did you remove it?

    Cheers!
    Ismael

    August 28, 2015 at 9:14 am #494687
    gjelsvik

    No, there was never a form there. All we have changed is that the CTA Box is now onthe left side of the Picture, not the right side, and we changed the background color to transparent from blue.

    Anyway, that problem was solved by you, when you suggested we used height: auto;

    August 29, 2015 at 8:45 am #495228
    Ismael

    Hi!

    Hmm.. Alright. Glad it is fixed. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Problems with content in 1/3 and 2/3 layout that is not resposive’ is closed to new replies.