CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
Jon Bridge
Jon Bridge

Reputation: 329

Why does my website look like this on mobile devices?

I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.

QUESTION 1

How can I fix my h3 text to ensure it's responsive on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices. 

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
   <span>I'm a</span>
   <span class="cd-words-wrapper">
   <b class="is-visible">Front-End Web Developer</b>
   <b>Graphic Designer</b>
   </span>
</h3>

Here is a screenshot of a mobile device view of my website showing the issue.

enter image description here

JSFIDDLE

Upvotes: 2

Views: 121

Answers (1)

hansTheFranz
hansTheFranz

Reputation: 2580

You need to set up Bootstrap media querys. 

@media (min-width: 375px) and (max-width: 414px) {
 .cssClass1{
    margin-left:5px !important;
   }
 }

so each device with a width from 375 to 414px will take these special CSS classes. The width and height of the different devices can be chceked in the Responsive design Section from Safari. 320px is iPhone 5 and 375 is iPhone 6 and so on.

Check out your JSFiddle I changed the font size when the device is smaller than 375px to 0.5em. Note that I used the !important keyword since sometimes its the Classes won't apply when you don't use the Keyword. Try it out yourself. That should do the trick if not leave a comment :)

Upvotes: 4

Related Questions