Home Page Featured Image not displaying correctly on mobile

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    My home page (static front page) featured image displays beautifully on every responsive device, EXCEPT the portrait orientation of phones. Tablet is fine both landscape and portrait, and desktop is good as well. Even landscape orientation on mobile is good. But the bottom quarter of the image is cut off on portrait mobile. Please tell me what I can do to solve this via the custom CSS option or back end settings.

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @cloudnineeventdesign!

    I’d try adding this under My Site > Customize > CSS – it should force the image to remain centered on all device sizes, so the logo in the middle remains visible:

    .bcg {
 	background-position: 50% 50% !important;   
}

    Let me know if that does the trick!

    Oh – I also noticed that first line on your home page: Nuptial • Celebratory • Philanthropic • Corporate line is getting cut off. It looks like the spaces in between the words were inserted in a way that’s causing my browser to view them as non-breaking spaces – meaning the text stays on one line, no matter what (even when it doesn’t fit).

    Replacing those with normal spaces might work better, so the text can wrap :)

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    Chad,

    That did the trick! Thanks.

    re: first line on home page – my goal is to actually have that hidden on smartphone devices (not tablets). On what device are you seeing the cut off?

    Below is my code to try to hide it from smartphone devices (I added the CSS you gave me to the same media specs):

    @media     screen and (max-device-width: 600px) {

    .list-header {
    display: none;
    }

    I also have this coded under landscape smartphone media specs:

    @media     screen and (max-device-width: 800px) and (orientation: landscape) {

    I did NOT add it to my tablet media specs (below) because I do want it to show on those wider devices:

    @media     screen and (min-device-width: 700px) and (max-device-width: 1280px) {

  • staff-loquaciousloon · Staff ·

    You’re welcome!

    For me, the text gets cut off around 655px or so – but it starts looking off-center at about 680px, so personally, that’s where I’d set the breakpoint:

    @media screen and (max-width: 680px) {
    .list-header {
        display: none;
    }
}

    I’m using max-width instead of max-device-width because your page is already set to treat width as device width, with a meta tag. HTML5 made it a lot easier to manage the differences in device widths that way:
    https://www.w3schools.com/css/css_rwd_viewport.asp

    The code above will hide that text on any device, regardless of it being a phone or tablet, portrait or landscape, when the available width is under 680px.

    One style to rule them all ;)

  • The topic ‘Home Page Featured Image not displaying correctly on mobile’ is closed to new replies.