Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 19, 2016 at 7:50 pm #635445
    Julie

    Hello!

    I am having trouble getting 1/3 columns to align center on tablet portrait views (columns 2 and 3 are farther to the right for some reason).

    I would also like the 3 columns to collapse in tablet landscape views so they stack.

    Can you help?

    Site url and links to screenshots are below.

    Thanks in advance for your help!

    May 20, 2016 at 6:48 am #635725
    Rikard

    Hey Julie,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 990px) {
.av_one_third {
margin-left:0 !important;
}
}

    Best regards,
    Rikard

    May 20, 2016 at 3:25 pm #635922
    Julie

    Hi Rikard,

    Thanks– that did the trick!

    One other issue– at the top of the same page, there is a 4/5 section with 2 lines of text and big button that is not centered on tablets. The 1/5 section that appears above it is centered (it has the logo and social sharing element), and I aligned center the text and big button code, but they are a little to the left.

    How can I fix that?

    Screenshot is linked below.

    Thank you so much for your help!

    May 23, 2016 at 5:19 am #636529
    Rikard

    Hi,

    Please try this as well:

    @media only screen and (max-width: 990px) {
.page-id-158 div .av_four_fifth {
    margin-left: 0% !important;
    width: 100% !important;
}
}

    Thanks,
    Rikard

    June 1, 2016 at 6:34 pm #641651
    Julie

    Hey Rikard,

    Thanks so much– that fixed it!

    June 2, 2016 at 7:43 am #641883
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

    August 19, 2016 at 10:58 pm #674888
    Julie

    Hey Rikard,

    I am having one small issue with this– the boxes are aligned correctly but there is no space between them when they stack on mobile views, so it looks like they are all one big box.

    How can I adjust for this?

    A link to the page and a screenshot showing the problem are below.

    Thanks in advance for your help!

    August 21, 2016 at 7:54 am #675254
    Rikard

    Hi,

    Please try the following as well:

    @media only screen and (max-width: 767px) {
.page-id-280 .av_one_third {
margin-bottom:20px; 
}
}

    Best regards,
    Rikard

    August 22, 2016 at 7:08 pm #675959
    Julie

    Hey Rikard,

    Thank you! This has been a recurring problem because I use this so much, but now I think I finally understand how to make these behave the way I want site-wide or per-page.

    Slowly but surely, I’m learning. :)

    Thanks so much!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘1/3 column alignment in tablet views’ is closed to new replies.