Why isn’t my main image on the mobile version longer and wider

  • deftdanny

    (@deftdanny)


    7 years, 7 months ago

    I am having an issue and have received codes but none of them work. I want the main image on my website to cover more of the area when using it on the phone. It looks great on a desktop but on the mobile version it is not as long or wide as the rest of the images on my main page. Here is the link to the site http://www.jtstavern.com/ I would appreciate it if someone can help me resolve the issue.

Viewing 1 replies (of 1 total)
  • Kharis Sulistiyono

    (@kharisblank)

    7 years, 7 months ago

    Hello there,

    Thank you for reaching out to us here. To replicate how the main header image looks like on descktop, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css? 

    @media only screen and (max-width: 1024px){
  
  .header-image{
    background-image: url(http://www.jtstavern.com/wp-content/uploads/2016/09/cropped-Main.jpg);
  }

  .header-image img{
    width: calc(100% + 80px);
    width: -webkit-calc(100% + 80px);
    width: -moz-calc(100% + 80px);
    max-width: calc(100% + 80px);
    max-width: -webkit-calc(100% + 80px);
    max-width: -moz-calc(100% + 80px);
    margin-left: -40px;
    opacity: 0;
  }
  
}

    If the image position doesn’t seem to fit your need, Adjust the following lines’ values accordingly. 

    
width: calc(100% + 80px);
width: -webkit-calc(100% + 80px);
width: -moz-calc(100% + 80px);
max-width: calc(100% + 80px);
max-width: -webkit-calc(100% + 80px);
max-width: -moz-calc(100% + 80px);
margin-left: -40px;

    Regards,
    Kharis

Viewing 1 replies (of 1 total)
  • The topic ‘Why isn’t my main image on the mobile version longer and wider’ is closed to new replies.