Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #616305

    Hi
    I have completed a site at http://xlr8-web-dev3-co.uk but the issue I am having is that I cannot get the sidebars to present under the main content on certain devices namely – IPAD & IPAD mini portrait view and Samsung Galaxy mobiles.

    I have an iframe set up on certain pages such as http://xlr8-web-dev3.co.uk/the-cottages/sleeps-3-plus-cot/ so I need the sidebar content to drop below the main page content for these devices as well as currently the sidebar content overlaps the iFrame content.
    Everything seems to work ok on IPhones.

    Also that iframe content should present differently in mobile view as well and im not sure this is working correctly on Samsung Galaxy either.

    I cannot see where I can change the responsive breakpoints?

    #617538

    Hey philcrothers!

    use this code for iPad screen size:

    @media only screen 
      and (min-width: 768px) 
      and (max-width: 1024px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    width: 100%;
    }}
    

    Best regards,
    Andy

    #617561

    Thanks for sending this through – yes I can see that this drops all the elements into one row.
    Is it possible to activate this code for just two pages? If so could you give an example for activating on only these two pages – http://www.ollerbrook-cottages.co.uk/the-cottages/sleeps-3-plus-cot/ and http://www.ollerbrook-cottages.co.uk/the-cottages/sleeps-5-plus-cot/.
    Site is now live BTW – URL above was dev site.
    Many thanks – great theme – would be good to get more options on responsive breakpoint etc in admin panel though.

    #618105

    Hi!

    add page-id to call the pages in question only:

    @media only screen 
      and (min-width: 768px) 
      and (max-width: 1024px) {
    .page-id-376 .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    width: 100%;
    }}
    
    @media only screen 
      and (min-width: 768px) 
      and (max-width: 1024px) {
    .page-id-374 .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    width: 100%;
    }}
    

    Cheers!
    Andy

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