I have problems with the layout of the preview is different from the published website. This problem seems to happen to the tablet a lot, occasionally also with mobile. Here are some screenshots for an example.
Sometimes, it is totally ok on mobile website, but not ok on tablet website (although they are totally ok on preview). Sometimes, the mobile horizontal of the real website is also affected.
It seems to happen a lot when I am using a grid. If the grid is not the right element to use, what element should I use?
@UXsp It looks like you’ve updated your site since posting the above link. I didn’t find some of the elements you’re referencing above. As for the images not centering in all cases, I wonder if making your own auto-centered div would be better. WebFlow’s Container div is supposed to center content, which is what it appears you’re using. Try placing a regular div, give it a width, set it to relative positioning, then set the left and right margin to Auto (the div needs a set width in order to center this way). Then you can place your content inside. This is another easy way to force center your content. If you want to force center content inside THAT div, either set the div to flex box OR set your content to Relative, set the width, and again make the left and right margin Auto.
Good luck with the grid stuff. I know CSS grids in theory are really powerful… I just seem to be really good at breaking them.
Thanks a lot! My profile picture (About page) is centred now.
I tried the same method with my card sorting picture (Problem 1), but it doesn’t work. Could you help me with that?
I have another question: How do I fix the spacing between the rows (Problem 2)? I have this problem on my Project and About page of my Tablet. Interestingly, they are totally fine on the desktop and mobile.
I generate a new share link again and I wouldn’t make/publish any changes now until someone reply.
Hi @UXsp, so for Problem 1, the card sorting picture… in mobile view, it’s been given a width. Make the left and right margin Auto and it will center the image for you.
Problem 2, I tried the following and created some space between the grid cells with some padding. I’m not able to recreate the issue you were having in the screenshots so I’m not sure if this is a help or not?
I placed the grid into a new div that replaces Container_8.
Set replacement div to 100% width (or whatever value you’d like)
Set grid width to 100% (or whatever value you’d like)
Set left and right margin as auto (overkill? I didn’t check to see if it’s getting a centering attribute from a grandparent)
Actually, I have a new problem (let’s say Problem 3) on my horizontal mobile view after solving Problem 1. The photo on the homepage was not 100%. Somehow the top and the bottom parts were trimmed. I tried the similar trick as before — this time I set the height also as 100% and the left & right margins as auto, but it didn’t work. Do you have any idea how to fix it?
Same as to before, the preview of the horizontal mobile view is totally fine; but the real website on the phone is not ok. I know it might be tricky for you, as you couldn’t really see the problem on the preview. I really have no idea why it happens in such a way so often (preview not the same as real website).
I have two ideas on that, for your link block containing the image, change overflow to visible. It looks like you have enough padding/space around the image for it to spill over a little bit in mobile view. And if there isn’t enough room, just increase the bottom margin of the photo for mobile only.
Another thought is to tweak the view height for the link block in mobile view so you have some breathing room around the image.
I suppose one last thought would be to try the Fit options, like ‘scale down’ but I think that would expose some white on the sides.
Sometimes ya just gotta hack this stuff to make it responsive
You are right, sometimes responsive design is a bit tricky!
I prefer not to have the image to spill outside the frame…just a little bit of personal preference.
I tried your second suggestion, it didn’t change anything. Afterwards, I reset it and checked again. I found that the horizontal mobile view still doesn’t work on my iPhone6s (the phone that I have been testing), however, it works perfectly on a Huawei phone (i.e. no trimming).
Not sure what else I can do, as even if I made it work on my iPhone6s, there might be some tiny layout problems on other phones such as Samsung or Sony. I am ok to leave this problem as it is since most people would not read my portfolio with a horizontal view.
Have you ever encountered a similar kind of issue — layout issue only on the certain phone models? What would you do?
Hi @UXsp, since 1995 it’s been a struggle to make sites that work as intended on every platform. I understand the desire to make it perfect everywhere… I struggle with that all the time! My husband and I just upgraded from iPhone6s and if I recall correctly, it’s no longer supported with the latest operating system, right? Could that be a reason why it’s not displaying like it should?
The truth is, your site still looks INCREDIBLE even with the cropped image
In this situation, I might think of exposure… how many people are using the device in question versus the devices where things appear as they should? I did a search for 2020 market share (I think this is US only tho) and found this article published in November of 2019. And of the iOS users, iPhone6s or lower might represent 20% of the market, maybe? Here’s an excerpt:
Android vs iOS Market ShareFascinating Facts (Editor’s Choice):
Google Android and Apple iOS have 98% of the global market share for operating systems.
Android’s market share will reach 87% in 2022 , forecasts suggest.
So far, the iOS market share in 2019 is 22.17% .
iOS has captured 50% of the UK market share this year.
Research into Android vs iOS market share in the US shows that the market leader remains Google Android , with a 51.1% market share in June 2019.
The sales of smartphones jumped from 139 million devices in 2008 to 1.56 billion in 2018 , affecting the mobile OS market share.
Between 2012 and 2019, the number of Apple smartphone users grew by 20% .
In 2017, there were 2 billion monthly active Android devices around the world.
Thanks for your comment and the market share info!
I just updated my iPhone 6s, but problem 3 is still there. According to the software update, it supposes to improve the responsiveness, but it didn’t actually help.
You are right about responsiveness — it’s a challenge to make all platforms work perfectly. Since Google Android has bigger market share, I think it makes perfect sense to focus on Android. I will just leave Problem 3 as it is now, as it’s a minor problem on iPhone.
Thanks a lot for your help! I enjoyed the conversation with you a lot!
If you have a problem to centre your text or photo like in my case, you could check out the solutions on the previous chats over here.
If you have more specific problems on your iPhone or iPad, maybe you could ask your specific question on a new post, as the problem here has been solved. I do not know if other members will notice your question easily.
