responsive design: positioning headline above image

  • Hi,

    if you visit this page with your mobile device, you will notice that the headline “Meet the Founders. Building the foundation for faster Internet.” overlays the picture. I would like to have the headline positioned above the picture. How can I style that in CSS?

    Thanks for your help!

Viewing 9 replies - 1 through 9 (of 9 total)

  • hi
    you can try something like this
    @media (max-width:480px)
    {

    .l-section-h {
    padding: 10px 0;
    }

    .ab_founders h2 {
    font-size: 35px;
    font-weight: 400;
    line-height: 42px;
    margin-bottom: 100% !important;
    color: #6f7c82;
    }

    .ab_founders {
    background-image: url(“/wp-content/uploads/2017/01/founders-datapath-io.jpg”);
    background-position: left 30%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-top: 70px;
    }

    }

    Thread Starter datapathio

    (@datapathio)

    @bikram-singh unfortunately it didnt work :/
    Do I have to consider anything when adding the CSS?

    just paste that code in your css file. with media query.
    clear wordpress cache if you are using any plugin for cache.

    Thread Starter datapathio

    (@datapathio)

    @bikram-singh hm I use no plugin for cache and simply pasting it in my css file also didnt work…

    its casching problem check your styles coming from autoptimize/css/autoptimize

    Thread Starter datapathio

    (@datapathio)

    what to check there? I’m new in css styling

    better use the “custom CSS” functionality in the theme customizer to add this CSS instead of to an existing theme or plugin-css file (where it could get overwritten when updating).

    regarding AO; you can see the page without AO by adding ?ao_noptimize=1 to the URL. and you can obviously empty AO’s cache, but it normally picks up any change automatically.

    frank (ao dev)

    Thread Starter datapathio

    (@datapathio)

    one question: is it possible that the code above doesnt work because of this line in the header? <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    Because when I google the issue people alsoways say the initial-scale variable has to be “1.0” and not “1”.

    <meta name=’viewport’ content=’width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no’ />

    i use this one

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘responsive design: positioning headline above image’ is closed to new replies.