Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 5, 2014 at 6:04 am #363429
    djshortkut

    On my homepage I have 2 color sections, one with text only and one with text and a button.. I am having an issue with the text and button staying centered within the color section on different screen sizes. When I view the site on a larger screen size and everything is on one line it works fine. When I view the site on mobile device like an iPad or iPhone the text and button are not centered within the color section. Can you please provide me with some Quick CSS to fix this or let me know what to do to fix it? I have attached some screen shots so you can see what I am talking about. Thank you in advance!

    December 5, 2014 at 11:44 pm #363918
    Elliott

    Hey djshortkut!

    I’m sorry but I’m not sure I understand. They look centered in your screenshots to me and also on your main site. Go ahead and highlight in your screenshot what your trying to do so we can get a better idea.

    Cheers!
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    December 6, 2014 at 8:36 am #364027
    djshortkut
    This reply has been marked as private.
    December 8, 2014 at 10:32 am #364521
    Ismael

    Hey!

    You can either decrease the font size of the h2 inside the text block or add a top margin on the button. Use this on Quick CSS;

    @media only screen and (max-width: 1200px) {
.avia_textblock h2 {
font-size: 27px;
}
}

    If you want to adjust the button instead, add a custom css class on the buttons. Refer to this link how: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Use “custom-button” for example then add this on Quick:

    @media only screen and (min-width: 900px) and (max-width: 1150px) {
.custom-button {
margin-top: 20px;
}
}

    Regards,
    Ismael

    December 8, 2014 at 11:07 am #364541
    djshortkut

    Thanks Ismael! I added a custom CSS field “custom-button” and tried adding the code below to adjust the top margin on the button but it didn’t do anything. Am I missing something?

    @media only screen and (min-width: 900px) and (max-width: 1150px) {
.custom-button {
margin-top: 20px;
}
}
    December 8, 2014 at 11:15 am #364544
    djshortkut

    Nevermind, I was able to figure it out by modifying the code slightly.

    @media only screen and (min-width: 900px) and (max-width: 1150px) {
.custom-button {
margin-top: 9px!important;
}
}

    Thank you very much for the help!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Color Section’ is closed to new replies.