CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Peter S.
Peter S.

Reputation: 25

Mobile website version breaks depending on the orientation of device screen

A bit of background: I am a student who has volunteered to redesign a website that is used by my extra curricular robotics team. This is my first time creating and working with Bootstrap and responsive design in general and, in my opinion, everything has gone very smoothly up until I uploaded the website to a test domain and viewed it on a mobile device.

The issue I am facing deals with the width of the navbar and content on the website depending on the orientation of the device. While the device is in portrait mode (vertical), the navbar and content don't have enough space in the text, and as a result, make the page extremely long and take up a lot of space. On the other hand, when the device is landscape (on its side), the website is, at least what I would consider, completely fine:

http://imgur.com/gallery/toZYt (album because I cannot post more than two links right now, shows pictures of the issue in greater (visual) detail )

I've experimented with the viewport/initial scale of the webpage, and while that does change the navbar and content width, the navigation bar text/logo is squished in, and also looks relatively low quality. Changing the min/max-width of the media does not seem to do anything. I'm stuck as to how to fix this, and whether or not it is a @media issue or if has to do with my CSS for menu/content. I have a 125px margin for the content in my CSS main CSS, mainly for the desktop site to look nice, so maybe that has to do with something?

I tried to research this problem earlier on other posts and other websites, but I couldn't find anything that seemed to relate to my issue, and any suggestions didn't really fix/affect the website in a major way. I'm hoping that there is someway to fix this without affecting the other forms of the website (Landscape/Desktop), as well as the margin of the text/content.

I found that the problem persists on other phones (tested on a OnePlus X, iPod 5th Generation, and iPhone 6) but haven't been able to test it on tablets. If anyone has any suggestions for me that will solve this issue on the website, It will be greatly appreciated. Thanks for reading!

Upvotes: 2

Views: 825

Answers (1)

Dan Mindru
Dan Mindru

Reputation: 6104

You need to look into CSS media queries. There are a couple of things you should fix, including the 125px margin.

For example, that margin is way too big for a mobile device, so what you should do is:

.element {
  margin: 0 15px; /* Default margin */
}

@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}

You can set multiple media queries that affect the same element. To build on the example above, you can have one more query @ 1280px:

/* ... */
@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}

@media only screen and (min-width: 1280px) {
  .element {
    margin: 0 200px; /* Margin for displays > 1280px */
  }
}

A good way to debug layouts at lower resolution is using your browser's built-in responsive view. You can do that in all major browsers now, for example in Chrome you need to open up dev tools (Ctrl + Shift + I or Cmd + Opt + I) and click on the phone + tablet icon on the top left.

After I took a closer look at your website, I found some fixes you can apply to it in order to make it look better on smaller viewports:

1: (first remove .navbar-brand > img inline style (max-width and margin-top) 

.navbar-brand img {  
  max-width: 200px;
  margin-top: 14px;
}

@media only screen and (min-width: 440px) {
  .navbar-brand img {  
    max-width: 350px;
    margin-top: 7px;
  }
}

2: Adjust border-control padding for smaller screens 

.border-control {
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (min-width: 768px) {
  .border-control {
    padding-left: 125px;
    padding-right: 125px;
  }
}

If this still doesn't make a lot of sense, I suggest you read up on media queries here and figure out how they work in depth.

Upvotes: 2

Related Questions