Reputation: 329
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.
Upvotes: 2
Views: 121
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