Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 18, 2017 at 3:17 am #735083
    kbartel1

    I have set a one-page website and gave each “color-section” it’s own id. I had to add some css to make the text the correct size.

    The issue that I am having is making the background images responsive.
    The bigger issue is the text not being responsive on mobile devices.

    Below is the css I added.

    #fullwidth .container {
    width: 100%;
    max-width: none;
    }

    #top #wrap_all .main_color h1 {
    color: #ffffff;
    font-size: 65px;
    font-weight: 800;
    }

    .avia-button.avia-size-x-large {
    font-size: 20px;
    min-width: 200px;
    padding-bottom: 18px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 18px;
    }

    The website is http://www.geosnapchatfilter.com

    January 20, 2017 at 8:55 am #736293
    Nikko

    Hey kbartel1,

    Try adding this code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
    #top #wrap_all #main .avia-no-border-styling {
        background-size: auto 100% !important;
    }

    #top #wrap_all .main_color h1 {
        font-size: 36px;
        line-height: 0.8;
    }
}

    Let us know if this helps :)

    Best regards,
    Nikko

    January 24, 2017 at 2:59 am #737506
    kbartel1

    Thank you very much. Worked like a charm!

    January 24, 2017 at 12:59 pm #737696
    Rikard

    Hi,

    Glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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