Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #25754
    Lora
    Guest

    Hello, My site title and homepage background image won’t resize for mobile on either iphone or android.  I’ve looked at a lot of support posts looking for answers but can’t seem to get the problem fixed on my own. Thank you

    #25776
    Jesse Owens
    Keymaster

    Hi Lora-

    For the Site Title, it looks like you may have a custom CSS rule adding the following:

    .site-branding { margin-left: -34px; }

    This is causing the first bit of your title to move off the left side of the screen on mobile.

    As for the background image, it doesn’t look like you’re using the Theme’s background image setting in Customize > Background. It looks like the background image is in the homepage content. Could you elaborate a little bit on how you added that background image?

    #25780
    Lora
    Guest

    Hi Jesse,

    I appreciate your response. If I find & alter the  code for the site title, will it stop looking weird? Where do I find this code? I don’t see the exact site title code you found in the Customize>CSS/HTML Editor,  in Customize>Advanced>Custom JS & CSS, or in the code for the homepage.

    The background image is the background for a block on the page. Does that complicate a solution?

    Thank you for your help.

    #25785
    Jesse Owens
    Keymaster

    Hi Lora-

    If you can’t find the source of the -34px margin, you can add this to your Custom CSS:

    .site-branding { margin-left: 0px !important; }

    The background image is a little tougher, since I’m guessing you’d like to have both the pupper and the logo visible on mobile. Since the image is so much wider than it is tall, it’ll be difficult to make it look right on a vertical mobile device.

    Your first step will be to add a Custom ID to the block with the background. In this example, I used my-custom-background as the custom ID.

    Then, you can add Custom CSS to force it to scale down correctly:

    #my-custom-background {
    	background-size: contain !important; 
    	background-repeat: no-repeat !important; }

    This might sound a little tricky, so I spent a couple minutes creating this video to walk you through it:

    #25855
    Lora
    Guest

    Hi Jesse,

    I can’t say how grateful I am for all of the time you’ve taken to help.  I never would have been able to change the image without your video. It now seems I’ve created an entirely new issue, however, and I could really use your guidance:

    On mobile the header is transparent and overlaps the page content. I’ve tried changing the padding and margins all over the place but can’t seem to find it.

    Thank you

    #25861
    Jesse Owens
    Keymaster

    Hi Lora-
    Glad to help! Since that call-to-action widget that normally comes with the theme is gone, you’ll need a little extra margin on the entry content.

    It looks like this rule will get the job done for you, in your Custom Theme CSS:

    @media only screen and (max-device-width : 752px) {
        .entry-content {margin-top: 300px;}
    }
    #25871
    Lora
    Guest

    Hi Jesse!

    Thanks so much, that has certainly fixed the issue on the home page. The other pages seem to still be doing the same thing, though–thoughts?

    Thank you again

    #25874
    Jesse Owens
    Keymaster

    Hi Lora-
    My apologies, I should have checked other pages. There’s another rule that applies to your pages other than home that’s overriding the one we just added. Change it to add !important, like this:

    @media only screen and (max-device-width : 752px) {
        .entry-content {margin-top: 300px !important;}
    }
    #25875
    Lora
    Guest

    No apologies necessary! You are a maker of magic! Thank you so SO much! 

    This would have been impossible without you and your colleagues. Thank you.

    #25878
    Jesse Owens
    Keymaster

    Happy to help Lora, let us know if there’s anything else you need a hand with!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header & Image Resize for Mobile’ is closed to new replies.