- Posts
I’m having trouble with the way my website looks on mobile.
I’ve tried plug-ins & gone through multiple settings in attempt to change the width/view of the images on my website…
The main image being the background for the row where my CTA button is located. (It seems the rest of the image “runs off” the page horizontally & I’d like to eliminate that.)
But I also have images as section headers that aren’t scaling for mobile either.Trying to target each element with coding is also proving difficult. Tried ctrl+shift+i to inspect each element, but I’m wondering if the “block” style editor won’t allow me to target individual images?
Hi Jessie-
Thanks for reaching out, and thanks for using the Post and Page Builder plugin for WordPress.
I took a look at your site, and it looks like most of the issues are being caused by some strange negative margins on some of your blocks. I can’t say for sure how these happened, but here’s how you can fix it.
Each one of your blocks that has the negative margins are using the value
margin-left: -250px;. Edit your homepage, and switch over to the Text editor tab.Then use the shortcut Ctrl-F (Cmd-F on a Mac) to search for
-250pxand use those highlighted sections to locate all of the affected blocks. Once you find those, replace all the negative values with 0px.That should resolve the issues both with your background image, as well as the “heading” images on the page.
The -250 px margin setting is actually what I want for those images on desktop, but is there anyway to change that for mobile only?
And my main issue, the background image for my header, can only be edited under “Customize” in the Post & Page Builder… I’ve tried adding custom js/css to fix the sizing of the image but to no avail.
It looks good on desktop but horrible on mobile.
Is there a way for me to create “mobile parameters” or disable horizontal scrolling for mobile entirely?Hi Jessie-
Thanks for the additional information!
Now that I know those negative margins were intentional, I think I know what you’re trying to achieve. It was a little difficult to explain how to fix this, so I took a few minutes to record this video to try and help:
Briefly, the negative margins are having the unintended side-effect of creating the horizontal scrollbar on mobile devices, but you can achieve a similar design using Full-Width sections for your headings, without the negative margins. I hope this video will explain what I mean, if you have a few minutes to watch.
Thank you so much for this! It was incredibly helpful & made me realize that the “sections” on my site were all merged?? So I didn’t have that option to change the section width. (All is good now.)
Eliminating the negative margins seems to have helped my header image but hasn’t fixed the image ‘running off’ the page for mobile view; I can’t find any other rogue margin or padding settings that could be causing that though.
Hi Jessie-
Thanks for the update! Glad to hear that you were able to sort out the section widths.
The thing that I missed is that your Contact Form provided by Contact Form 7 has fixed field widths, so they’re overrunning their container at smaller sizes.
Navigate to Customize > Advanced > Custom JS & CSS and paste this line into your Custom Theme CSS:
.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 100%; }
- The topic ‘Background image on mobile and cut-off section headers’ is closed to new replies.
