Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 8, 2015 at 6:35 pm #484834
    thecszone

    Hi,
    On many of my pages I customized the column widths by adding code block on the page and inserting this css code –

    <style type = “text/css”>
    div .av_one_half {
    margin-left: -8% !important;
    margin-right: none!important;
    width: 58% !important;
    }
    </style>

    I did it this way because I did not want the .av_one_half to affect all pages. This displays perfectly on the desktop version but in mobile, the columns overlap on all mobile sizes. The solution I would like is for the second column to move under the first column. Is there a way to do this?
    Below is a link to a sample page with the issue.

    August 9, 2015 at 11:25 am #484887
    Basilis

    Hey thecszone!

    You need to control the are also, with media queries for making it work on our custom CSS.
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!
    Basilis

    August 9, 2015 at 6:00 pm #484922
    thecszone

    I realize that I have to use custom css in the media queries by size of device as that’s the area I have been working on, but what I don’t understand is the actual code to use for this problem. As I said, I want to have the column post under the first column. In the past, I’ve received help here with the CSS I need to use. If you could give me the basic css to move the second column under the first one, I can adjust it per device with no problem. Thanks.

    August 10, 2015 at 11:27 am #485174
    Rikard

    Hi,

    If you wrap your code in this media query it should only affect screen wider than 767 pixels:

    @media only screen and (min-width: 768px) {
  div .av_one_half {
  margin-left: -8% !important;
  margin-right: none!important;
  width: 58% !important;
  }
}

    Please let us know if it works out for you.

    Best regards,
    Rikard

    August 10, 2015 at 3:56 pm #485411
    thecszone

    Yes, Rikard, this works great! I have another question. I have turned on show sidebars on smartphones and they display under the content as I want them to. But I need the same thing to happen for smaller tablets. So I want to have the sidebars display based on screen size. Can you tell me how to do that?

    August 10, 2015 at 6:35 pm #485548
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
.container .av-content-small.units { 
width: 100% !important; border: none; }}

    Regards,
    Yigit

    August 10, 2015 at 7:52 pm #485575
    thecszone

    This works to make the sidebar go away, but I want it to display under the content.

    August 11, 2015 at 1:40 am #485677
    Yigit

    Hi!

    Please change the code to following one 

    @media only screen and (max-width: 990px) {
.sidebar,.container .av-content-small.units { 
width: 100% !important; border: none !important; }}

    Regards,
    Yigit

    August 11, 2015 at 1:36 pm #485924
    thecszone

    Thank yo, Yigit. This works great!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Mobile Issue With columns’ is closed to new replies.