CODEWITHSUNDEEP
csstwitter-bootstrapmobile
Zaidra
Zaidra

Reputation: 51

Problems scaling to mobile and small screens in general

I've recently deployed my first ever website and on my wide screen 1920x1080 monitor everything looks fantastic. However, things start to get really weird on 13" laptop screens, tablets and mobiles. I've been analysing my code and a few development tools such as googles and bootstraps recommendations for mobile and I just can't quite seem to understand what it is in my code that needs fixing.

On mobile, it's possible to scroll across all the way to the right to parts of the website that shouldn't even exist, just scrolling over to white space. I've managed to remove the navbar for mobile - a start, but honestly, I feel a bit lost/overwhelmed and can't seem to find the root cause of this issue.

Here is my website: -redacted-

and -redacted- is my github repository

Upvotes: 1

Views: 85

Answers (3)

Rory O'Keeffe
Rory O'Keeffe

Reputation: 211

You have this rule in your CSS, which is ruining the responsive effect the .container class from Bootstrap is supposed to have (overriding the media-query-set width it should be using, and indeed is using in other parts of the page):

.myskills .container {
  width: 1500px;
  position: relative;
  top: 35px;
}

Setting a fixed width, in this example, being the problem.

There may be more examples of things like this on the site, so I'd advise removing all examples of this that you can find.

In general I wouldn't advocate overriding Bootstrap CSS classes without being very sure why you need to do so, particularly the structural elements like .container, .row and .col-xx-x classes.

Upvotes: 1

Frank
Frank

Reputation: 624

The problem is that your using fixed width's for the elements on your page.

E.g. for the class .container you specified a width of 970px. Try using percentages, like so:

.container {
width: 80%;
margin: 0 auto; //to center it
}

You can basically take this solution and apply it to the other issues on your page, like the header.

Also note:

You should also look into media queries, that would enable you to keep the page as it is for large screens and only change it for smaller screens, defining, e.g., a max-width:

@media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}

EDIT:

I understand you are using Bootstrap - in that case you would need to entirely delete all statements that are overriding Bootstrap's default configurations.

Anyway, keep the upper recommendations in mind for future CSS coding.

Upvotes: 1

Nacho Ramos Sánchez
Nacho Ramos Sánchez

Reputation: 584

You have set your containers width with px.

Try to change them with % or directly erase those px measures.

Bootstrap containers adjust themselves to the correct width they need.

Upvotes: 1

Related Questions