No responsive background

  • Hi,

    I have tried everything to make the header background with the GIF (Beetlejuice and bread in colors-Muerdeme Bakery)responsive located at the top of the home page. Also, I want responsiveness the phone number and email button responsive and I am not able to. I have tried CSS and insert other tags in the CSS style sheet with no results. Can someone please advise me on what to do? thanks

    The page I need help with: [log in to see the link]

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

  • Hi @ermarsot,

    How fun. Cool site!

    I think you should look into art direction for that background hero and the 2 foreground images.

    In short, you want to show a landscape-friendly image on desktop (like you have now), but then provide a portrait-friendly (stacked) version for smaller devices. You can use media queries to figure which version to display (depending on the device).

    You can learn more here https://dev.to/marklchaves/what-is-art-direction-and-how-to-use-it-1o3n.

    I’m happy to answer any question about this! Just yell.

    Cheers,

    Mark

    Hi,

    You can use Bootstrap or media rules

    
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

    Font: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    • This reply was modified 3 years, 11 months ago by Yui. Reason: please use CODE button for proper formatting
    Thread Starter ermarsot

    (@ermarsot)

    @cyferweb Thanks! I have added the 

    
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

    to the Additional CSS and it is still no responding.

    • This reply was modified 3 years, 11 months ago by Yui. Reason: please use CODE button for proper formatting
    Thread Starter ermarsot

    (@ermarsot)

    @mlchaves thank you! I will try it and let you know! thanks!

    Thread Starter ermarsot

    (@ermarsot)

    @mlchaves Thanks for your recommendations. I have inserted the code that you gave me in my additional CSS and plug the URL of my pictures into WordPress. I am still not having success. I am not sure what I am doing wrong.

    Hello @ermarsot,

    I just visited your site again. I don’t see any media queries or art-direction images.

    Did you remove the code?

    If you want me to help you troubleshoot, feel free to set up a test page and then post the link to the test page.

    If you need more examples, I’ve got many live demos of art-direction responsive design on my CodePen and running my own site.

    Just let me know ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘No responsive background’ is closed to new replies.