Background images not fit when browsing on mobile site
-
Hi, I’m using the pique theme and everything looks well until I use my mobile or iPad to browse through my site.
The background images (featured image) tend to go crazy whenever I browse on certain types of mobile. For example, instead of the usual image, the bottom half of my image appear first before the first half of my image.
It, however, looks pretty good whenever I use a desktop though. Is there a way for me to disable the mobile-responsive site? Or at least correct this so that the images don’t misalign on mobile browsers.
The blog I need help with is: (visible only to logged in users)
-
Hi there!
I checked out your site on desktop and an iPhone 6 (using Chrome) and the featured images/backgrounds looked the same to me.
Can you share more details about where you’re seeing the problem? Such as: Device, browsers tried, which operating system.
If I have more details on how it’s happening, I can try to replicate it and look for a solution. :)
-
Hi Sarah,
Thanks for your reply.
Oops, think it was the same because I sort of gave up and changed it to a plain background. Now, I’ve reverted back to the images.
Was looking through the site using Safari, iPad and iPhone5 and iPhone 6. It looks fine on desktop (my mac pro) on all browsers. But the background appears weirdly on basically the iPhones and iPad.
-
Hi there,
I am also facing the same issue – Actually two words are missing from my first panel and image not displaying correctly on iphone – haven’t been able to check android. http://www.chappellandcaldwell.com
Thanks,
Alison -
@myidlethumbs — Hi there!
Where exactly are you seeing an error in your background images on mobile? If possible, a screenshot would be great. (You can upload it to a service like CloudUp and share the link here, or add it to your Media Library and I can look.)
For the text in the first panel, from looking at it, I’m thinking that the Pique theme may want you to have fewer words in the large text area, and instead break it up into two pieces/sizes like in the demo: https://piquedemo.wordpress.com/.
To try that out, click in a spot to break up the text and hit enter so it becomes a separate paragraph, then take a look and see how it handles that.
Let me know how it goes & I’ll keep an eye out for the details from you on where your image problem is happening. :)
-
@golfpasssg — Hi! Okay, I see what you mean now.
I saw this image displaying oddly on mobile in particular: https://golfpassasia.files.wordpress.com/2016/02/3.jpg
However, it’s much larger than the recommended size for Featured Images on the theme (1400x1000px), so it may fix itself if you resize the image.
According to the theme’s information: “The recommended Featured Image size is at least 1400 by 1000. The theme will scale and crop the images depending on the page and device size.”
Consider resizing that image and let me know if that helped or if you see anything else odd happening there. :)
-
Hi there, thanks for the response. I tried your suggestion but what I am noticing is that it is still cutting off the first few words on iphone view, (android too – I’ve checked now) whatever I do. The image is also beginning to repeat at the bottom when viewed on a mobile device. Sorry – but will do as you say and upload into my media files now. Many thanks.
-
@myidlethumbs — Oh, I see what’s going on now. Some of your custom CSS is causing it. It looks like the CSS making the Site Title larger, and maybe the added padding, is what’s causing the issues in mobile view.
To narrow it down, you could remove the CSS and add each piece back in one at a time, saving and refreshing in between to see what happens, and then we’ll know which one we should work on tweaking specifically. :)
- The topic ‘Background images not fit when browsing on mobile site’ is closed to new replies.
WordPress.com Forums 
