Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 12, 2015 at 8:30 am #410344
    gharding

    this is a test I’ve have going on now: http://wordpresslearning.thepixelwizard.com/frontpage-test-3/

    I would like to have a smaller header image for when it appears on a mobile device or smaller screen size.

    thank you

    March 12, 2015 at 8:32 am #410346
    gharding

    p.s. OR, how could I get the color section background at the top to scale better for mobile or small screen sizes?

    gary

    March 12, 2015 at 9:46 pm #410743
    Elliott

    Hey!

    Drag a codeblock element to your page and add this inside.

    <style type = "text/css">
@media only screen and (max-width: 479px) {
#av_section_1 { background-image: url("YOUR URL") !important;
}
</style>

    And then replace “YOUR URL” with the URL to your smaller image.

    Regards,
    Elliott

    March 12, 2015 at 11:13 pm #410771
    gharding

    Ellliott, thanks. Will try. I need this on every page, though, but it sounds like you want me to put it on the home page only or?

    thank you

    March 13, 2015 at 8:17 pm #411262
    Elliott

    Hey!

    If your going to have it on every page then add it to your Quick CSS field like so.

    .page #av_section_1 { background-image: url("YOUR URL") !important; }

    Cheers!
    Elliott

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