Responsive Design Issues

Design help General
1

Hi,

My site is not looking good on iPhones or Android phones (misalignment of text and photos) even though everything looks good in preview mode. I have not idea what i’m doing wrong.

Here’s the site in webflow: Webflow

Here’s the live site: http://www.bluestardigitalagency.com/

Here are some screenshots:
iPhone (not filling entire screen) -

750×1334 373 KB

Android (Everything squished together)-

900×1600 161 KB

Here is my public share link: LINK
(how to access public share link)

2

Hi @JSummers, Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

3

Thanks for information, @JSummers, but we need read-only link to your project. It seems some elements has wrong measurements. Guidance how to share link you can find here How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

Regards,
Anna

4

Here is the share link

https://preview.webflow.com/preview/bluestardigitalagency?preview=2a0b9e9dc58831300925b5e0d177dfc0

5

Hello @JSummers,
I can see several reasons of this problems, so lets go step-by-step.

  1. Somehow you have structure, where is container sit inside the container. Don’t know how you did that, because it is impossible to do by just drag and drop.
  2. Container is the element that has presets, which make it always centered on the page. But seems like you needed something that is not centered or has bigger width. Then you should use regular div and you would not have to use so huge negative margins and positioning for move content to the place that you like.
  3. Big negative margins and positioning very often cause overflow and make content all messed up on mobile devices. Some of the elements in your case, unfortunately end up very far away from body edges because of not correct positioning.

I would recommend re-create your site structure with using CSS box-model principals, or at least get raid of huge margins/padding compensated by huge negative margins/padding on other element.

For better understand CSS box-model you can watch free video course Understanding the CSS Box Model

Also you can go through Webflow courses http://help.webflow.com/courses/getting-started for better understand correct using elements.

Regards,
Anna

6

I see. My main issue is getting rid of the white space on the right side of the mobile sites.

7

Ok Thanks. Do you know i there is a way to disable horizontal scrolling?

8

Here is fast workaround https://drive.google.com/file/d/0B-7cg8BSq1Z_blpFRGZwTGVJQXM/view?usp=drivesdk

1 Like
9

Thanks that helps with the misalignment of text. Could you make a video explaining how to fix the white space issue i’m having in portrait mode on mobile?

10

There is probably an element on your site with a really great width, find this element, reduce the width or set the overflow to none and ill think you’ll be alright.

11

I checked for this already. Something else is going on besides that.

12

Still having issues?

13

Yes. I cannot figure out how to get rid of the white box/white space on the right side of the screen on mobile in portrait mode.

1 Like
14

Well, everything looks fine on my phone, unless you using some other links than http://www.bluestardigitalagency.com

15

Take a look one more time. I restored the version that has all the content I want. It has white blank space on the right side. Only in portrait mode on mobile (landscape & tablet work fine). I have a iPhone 6.

16

Well, then you probably forgot to fix issues that I showed you before.
There is 3 lists of items, which wider than body. It makes all content pushing to the left and create gap. Follow my recommendations, reduce lists width and gap will disappear.

1263×969 109 KB
1332×967 101 KB
1360×968 103 KB

Regards,
Anna

17

I actually tried this last night and there was still a gap. I just deleted the lists entirely so you can see that the gap is not being caused buy the lists only. Take another look.

18

Well, without lists gap is about few pixels. But I can’t find the reason, unfortunately. It could be some padding or margin. on one of the hidden elements.

19

Hello @JSummers :)

Super sorry to hear about the issue you’re experiencing. @sabanna found few things that might have helped with solving your problem, so kudos on that Anna :)

I have found few more things that should solve this problem.

  1. First of all please move navbars from inside of hero section and keep them in the root of the body. There are few exceptions of doing so but this is a common usage.

  2. Now… head to your mobilenav node (easy to do so from navigator)

    Once you’re there please go to mobile view

    and go to styles where we need to fix few things.

  3. First of all we need to clear width value. You can do that by clicking on blue name and remove

  4. Now make sure you set values in designer as in the picture below. That will make sure we have a navbar appearing at the very top of the website and that it will fill entire width of the screen :)

    249×735 23 KB

Notice how I have cleared values for margin, width etc in here. Webflow handles default values for this on the level that is enough for this to work well :)

That should do the trick for the white background on the side of the screen. If you have followed all steps provided by @sabanna in previous posts and this post you’re reading you should have that working well :)

I have also saw you’re using two navbars: first for desktop, tablet and phone landscape and second for mobile portrait only. I am surprised as you can use only one and style it however you want :) Please take a moment and watch the video in our tutorial available at Webflow 101 | Webflow University where you should get to know the basics of navbar integration and styling.

Let us know if you need any further assistance and make sure to follow steps we’re providing :)

Cheers,
Bart

1 Like
20

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.