Issues with the Mobile site
-
On my mobile site the layout and content aren’t displaying as they should.
1. I was wanting the mobile site to appear similar to the desktop site but the background image isn’t rendering properly. The image is static and displays on the entire viewport of the desktop site but doesn’t remain static on the mobile site and doesn’t shrink down to the proper mobile resolution.
2. Also, on the desktop site I have the display as transparent and all content is within a border which is less transparent for easy readability but the mobile site is just a white background behind the content but overtop the actual background image.Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, you currently have the mobile theme activated at Appearance > Mobile. That option is really meant for themes that are not responsive designs. Pique is a responsive design, so it adjusts for all screen/window sizes.
The featured image for the home page is not set to shrink with the screen/window size and it is best used with an image that the cropping and such and the theme changes from a fixed background to scroll at 767px and narrower. You can add this to the very bottom of your custom CSS and see if this gets you more of what you are looking for.
@media screen and (max-width: 767px) { .pique-panel-background { background-attachment: fixed; background-size: contain; background-position-y: top; background-repeat: repeat-y; margin-top: 250px } } -
Hey thesacred path. I added this css code and tried it with the mobile theme on and off but im still having issues. ( I am leaving the mobile theme off from now on). But I do think that we are on the right track to fixing these issues! Below are the issues that I am now having on the mobile site
1. The image now repeats itself on the home page instead of staying fixed
2. the image on all other pages (besides home) does not stay fixed so when you scroll down the page the image ends so then there is just a white background.
3. The image doesn’t shrink its width so only part of the background image is displayed
4. The font on all pages doesn’t shrink so then there are only a few words on each lineThank you for your help and patience!
-
-
1. The image now repeats itself on the home page instead of staying fixed
Remove this from the media query.
background-repeat: repeat-y;2. the image on all other pages (besides home) does not stay fixed so when you scroll down the page the image ends so then there is just a white background.
3. The image doesn’t shrink its width so only part of the background image is displayedThe front page has different styling. On that page we are dealing with a background image in the panel. On the other pages, the background image is in the body of the page.
Replace the 767px media query with this one.@media screen and (max-width: 767px) { .pique-panel-background { background-attachment:fixed; background-size:contain; margin-top:250px; } body.custom-background { background-color: #000 !important; background-size: contain; background-position-y: 250px; } .site { font-size:40% } } -
I have found out some more information that I wanted to give to you. This is info that I got before making your most recent recommended changes above. With the scrolling issue: on my iPhone 5S the content did not scroll while keeping the background image in place in the background ( I believe you called this function “fixed” but on two of my friends Droids the backgground image did in fact stay fixed. At least we are getting closer!
1.After removing the CSS statement: on my iPhone and on my friends Samsung Galaxy J3 the image is there and is a good size/ratio but is only in the middle of the page, is static, and the rest of the background is black.
2.After putting in the new CSS statements: on my iPhone the background image is behind the banner and does not scroll. on the samsung the image is behind the banner page but since it scrolls, you can see the image at the top of the viewport but isn’t the proper height. I am okay with this for the samsung if this is the best that we can get it but I still would like to fix the issues on the iphone.
Thank you sir! I still really appreciate your help
-
You know, I’m not sure what is going on here. I’ve hooked my iphone up to my computer via USB so that I can actually inspect Safari on my iphone, and I cannot get the background image to stay fixed on the pages other than the home page. The home page, we are working with a featured image whereas on the other pages we are working on an actual background image. Given we are moving into the Holidays, it may be a bit before I can get one of our developers to look at this and see if they can figure out what I’m missing. I’ll ping them and see what I can get going for you.
-
Hey there, I was able to get one of the developers, and as luck would have it, he had just gone through discussions of this issue in relation to another theme. Apparently some browsers on mobile devices do not support fixed backgrounds because it presents a huge rendering cost and can decimate scrolling performance. There is a lot of talk about possible workarounds, but none of them are at all reliable and don’t work on all devices that exclude fixed backgrounds or elements.
Sorry I don’t have a magic fix for this on iPhones.
-
Okay, I understand. Hopefully the developers get a workaround functioning one day. I will keep trying to get this figured out and if I do then I will let you know so you can have the information for the future. Thank you for contacting a developer for me. Hope you have a wonderful holiday(s)!
-
-
I’ve somewhat found a solution. When I set the media query to how I have it for screen2 right now then the homepage does scroll for iphones but only the homepage. But this breaks the site on my droid. So I tried to create a second media query (screen2) with max width 480px but this query doesn’t seem to be called for widths 480px or smaller
-
-
screen2, print2, etc., aren’t valid CSS selectors, and the body element is a single element. You can’t really have two different body selectors. If you had access to the php script theme files, you could add some php scripting to add a unique CSS class to the body selector at 480px and narrower so that you could then, sort of, have two separate body selectors, but in general, that is what media queries are for. At 480px and narrower style the body like this. It doesn’t really require that unique CSS class and the PHP for screens 480px and narrower.
That said, your overflow: hidden; in the body.custom-background rule in the 480px media query is what is keeping things from scrolling. Remove that and things will scroll.
I went through your 480px media query, and replace what you have with the following and see if that gets you what you want. Note I’ve changed the media query to “screen” since screen2 is not recognized by any browser and that is preventing your query from running. I also added a background-position declaration to the body.custom-background rule and spaced the image down 320px. You can edit that value to get the alignment you want.
@media screen and (max-width: 480px) { .pique-panel-background { position:fixed; background-size:contain; } body.custom-background { background-color:#000; background-size:contain; background-position: center 320px; } .site { font-size:40% } .cit2 { width:90% } } -
the background position declaration did fix the issue of the background image beinng behind the header but I still can not get the image to remain fixed. When I had used the overflow:hidden declaration it did fix the scrolling issue but only on the homepage and that was it
-
The overflow hidden basically tells the browser to ignore everything outside of the viewport (screen) so in essence, it would appear that the background is “fixed” since you can’t scroll. Given how some mobile devices ignore background-attachment: fixed; I don’t think there is anything we can do. In this instance, the browser has the final say.
-
How can we create a second media query for the safari browser so we can use overflow:hidden since that seems to partially work for iphones?
-
This is a bit of a challenge. Have a look at this article on CSS-Tricks which talks about targeting iPhones with media queries. It will require a few of them so that you can target all the different variations.
- The topic ‘Issues with the Mobile site’ is closed to new replies.
WordPress.com Forums 