Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1360673

    I have 9 pages that all open within their own iFrame. This all works perfectly, except on medium tablets in portrait mode. This breaks at 2-colums and makes some images too small for the layout.

    I would like to set the breakpoint for just these 9 individual pages to go to one column below 1200 px — like it does on phones. I don’t know exacly how to do this though I am thinking it can be done by the post (page) number.

    For example, here is one of the pages: https://blaircomm.us/wp-admin/post.php?post=103516&action=edit&classic-editor=1

    I am assuming the page number is “103516” and can be targeted with this CSS somehow:

    @media only screen and (max-width: 1200px) {

    }

    I have 9 pages and would like to target them all in one CSS snippet to break to one column below 1200 px. How can I do this?

    Thanks.

    — Michael

    #1360726

    Hey blaircomm1,

    Thank you for the inquiry.

    You can try the following css code to adjust the fullwidth breakpoint of the columns (1/2). Please add it in the Quick CSS field.

    @media only screen and (max-width: 1200px) {
    
      /* Add your Mobile Styles here */
      .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column.av_one_half, .responsive #top #wrap_all .av-flex-cells .no_margin {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
      }
    }
    

    Best regards,
    Ismael

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