Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 12, 2017 at 5:59 pm #820152
    cgmoss121

    I am trying to make some images full width so it display’s from browser edge to browser edge on any device. So if they pull it up on a smart phone or desktop it always covers the screen completely. I have tried using a css class and a color section ID but that doesn’t seem to work. Can someone help with this? Website: http://www.mossimage.com – For instance the image at the top of the landing page should be full width and fluid. As well as the image on the “Marketing” page at the top.

    July 13, 2017 at 6:43 am #820352
    Rikard

    Hey cgmoss121,

    The image seems to respond well on my end, but to have it covering the entire screen height on all devices will likely be difficult. You would probably have to use several different sections using images adapted to the screen size in question. You can hide/show different sections using CSS like this:

    @media only screen and (min-width: 768px) {
#section-desktop {
  display:block !important;
}
#section-phone {
  display:none !important;
}
}

@media only screen and (max-width: 767px) {
#section-desktop {
  display:none !important;
}
#section-phone {
  display:block !important;
}
}

    Best regards,
    Rikard

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