Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 6, 2015 at 4:26 am #375457
    mbean2014

    First thanks for help with other issue on another topic.
    Again need some help with display on Mobile devices, (different issues).
    Link to test site attached.

    Please also see attached image on how it looks on ipad (left) and iphone (right)
    screens

    Basically 2 issues:
    1.On iphone/any mobile phone, why are the elements displayed in a straight line, even though there are enough space for at least 2-3 per row.
    Even when I rotate phone to landscape, where there’s whole lot more spaces, it still only displays one per row.
    How to modify so it will display at least 2-3 per row?
    2. On ipad/any tablet, how to disable the 2 black margin at top and bottom?
    Thanks

    January 6, 2015 at 7:12 pm #375791
    Elliott

    Hey mbean2014!

    It’s because your using 1/5 columns instead of 1/3 so your content is not using the full space of the screen.

    Drag a codeblock element to your page and add this inside to change the background to white.

    <style type = "text/css">
.html_stretched #wrap_all {
  background-color: white !important;
}
</style>

    Best regards,
    Elliott

    January 6, 2015 at 7:12 pm #375792
    Andy

    Hi mbean2014!

    1.) For mobile try this in Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
width: 50%; 
}}

    2.) This is the background color. You can control it using this:

    .html_stretched #wrap_all {
background-color: white;
}

    Cheers!
    Andy

    January 6, 2015 at 9:15 pm #375848
    mbean2014

    Thanks Elliott & Andy.
    Tried both suggestions.
    Issue 1:
    -Tried 1/3 (and many other sizes), all yield same result – one per row.
    -The Quick CSS does fix this, but caused more issues to all my other pages (all pages now either cut off, or in weird layout).
    Anyway to apply this to only this page?

    Issue 2: Black margin is gone, but replaced is now 2 black border line where the 2 margins used to be. Anyway to hide these?

    January 7, 2015 at 7:37 am #376000
    Ismael

    Hey!

    1.) Please replace the css code with this:

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
width: 50%;
clear: none;
}
}

    2.) Use this one to remove the border:

    @media only screen and (max-width: 989px) { 
#top.avia-blank #main .container_wrap:first-child {
border: none;
}
}

    Cheers!
    Ismael

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