Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 8, 2016 at 8:25 pm #722156
    AmyBuild

    I am using a background image in a cell (much like your Health Coach demo) and it looks fine on the desktop. On mobile, however, the image is cropped very short vertically with just a small portion showing. How can I fix this so it shows in its entirety on mobile? Link is listed below.

    thank you!!

    December 8, 2016 at 11:36 pm #722250
    Nikko

    Hey AmyBuild,

    Try adding this code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .page-id-253 #hello .flex_cell.av_one_third.avia-builder-el-last {
    min-height: 500px;
    background-position: top center !important;
  }
}

    Let us know if it helps :)

    Best regards,
    Nikko

    December 9, 2016 at 1:28 am #722278
    AmyBuild

    This fixed this particular issue on the phone (thank you!) but I just checked things on the iPad for the first time and came up with two new issues:

    1. Same page but viewing via iPad, it is still displaying the cells side by side horizontally (like on desktop) but it does funky things to the right cell and stretches and crops that background image too much. If there isn’t an elegant fix for keeping the columns side by side when viewing by iPad, can we force that second cell below the text cell, as it does for mobile view?

    2. I don’t think this is related to our fix for the About page… but for all pages, the top header with logo and nav bar run into each other. WAIT, I solved this myself ;) NEVER MIND — I found the setting to activate the mobile header menu for tablets too. So my only issue is #1 above!

    Thanks!!

    December 12, 2016 at 10:00 pm #723401
    Nikko

    Hi,

    Yes, try adding this code above the code I have gave before:

    
@media only screen and (max-width:1024px) and (min-width:768px) {
  .page-id-253 #hello .flex_cell.av_two_third, .page-id-253 #hello .flex_cell.av_one_third {
    display: block;
    width: 100%;
  }

  .page-id-253 #hello .flex_cell.av_one_third {
    min-height: 900px;
    background-position: top center !important;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    December 14, 2016 at 7:26 pm #724463
    AmyBuild

    THANK YOU!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘background image on mobile’ is closed to new replies.