Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 18, 2016 at 11:45 am #616305
    philcrothers

    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?

    April 19, 2016 at 4:44 pm #617538
    Andy

    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

    April 19, 2016 at 5:06 pm #617561
    philcrothers

    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.

    April 20, 2016 at 9:43 am #618105
    Andy

    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

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