Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #722156

    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!!

    #722250

    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

    #722278

    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!!

    #723401

    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

    #724463

    THANK YOU!

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