I'm facing a problem with Bootstrap due to lines:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/"></a>
</div>
</div>
</div>
<div id="main_top">
<div class="container">
<div class="row">
<div class="span12">
...
In the main_top I have a background image. The problem happens when I resize the browser due to the following code:
#media (max-width: 979px)
.navbar-fixed-top {
margin-bottom: 20px;
}
Basically, when browser width < 979, there's a white line due to 20px margin.
Could you help me to fix it? I also created a sample here: http://jsfiddle.net/TxRgF/
Working DEMO
What about this:
#media (max-width: 979px){
body{
padding-left:0 !important;
padding-right: 0 !important;
}
.navbar-fixed-top {
margin-bottom: 0px !important;
}
}
At that width, the body has left and right padding. Add this class at the end of your CSS.
#media (max-width: 767px){
body {
padding-left:0 !important;
padding-right: 0 !important;
}
}
http://jsfiddle.net/simply_simpy/ryjMT/2/
You will need to add padding to other elements to compensate.
Related
I am trying different things to adjust the margin left for mobile (different)screen size. I am setting margin according to medium screen size using margin-left. And want to adjust for small screen size. Generally which method is useful and papular. Nothing is working in my case.What is wrong?
Can someone explain it with example. I am able to adjust screen size for column grid. But heading and header and footer is the issue. If I give heading and make it horizontal-align using margin left. How to change it for different size screen? What is wrong?
1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.)
2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)
3)Add bootstrap utility class (h1 Utility class)
<script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- font awsome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</script>
<style>
.read{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
margin-left: 400px;
margin-top: 100px;
}
.learn{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
/* margin-left: 400px;*/
/* margin-top: 300px;*/
}
.mobile{
width:400px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 100px;
}
.mobile-margin{
margin-left: 50px;;
}
#media only screen and (min-width : 320px) {
margin-left: 50px;
}
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="read">Read more</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 ml-md-4 ml-sm-1">
<h1 class="learn">Utility Class</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="mobile-margin visible-xs">
<h1 class="mobile">view on mobile</h1>
</div>
</div>
</div>
</body>
You can try Bootstrap classes to adjust according to the screen sizes. First set a default (mobile) and then change using md or lg:
<div class="row">
<div class="col-md-3 ml-0 ml-lg-5">Margin Test</div>
<div class="col-md-3 ml-0 ml-lg-3">Margin Test</div>
</div>
margin-left is set to 0 for mobile screens and margin-left is set to 5 for large screens
I give you an example of a heading H1 element.
First make sure to add bootstrap css link correctly to your page.
In bootstrap you can use the m class for margin and the p class for padding. In addition you can optionally set the side on which you want to apply margin or padding. Use ml for example to set margin left. You can give it a value between 0 and 5. For example, ml-3. You can also specify multiple values for multiple screen sizes as shown in the below example:
<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>
In this example, the heading element will have a margin of 5, it will change to 3 when screen size reaches medium and it will change to 0 when screen size reaches large.
All you have to do is give the class name in the media screens.You haven't given your class name and just given margin-left
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
You can specify the name like this
#media only screen and (min-width: 320px) {
.read {
margin-left: 50px;
}
}
#media only screen and (min-width: 768px) {
.read {
margin-left: 400px;
}
}
You can center the heading through
<h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>
and for buttons centering
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
I have a page title <h1> MY JOB </h1> with a font size of 70px. I want to automatically change the size of the title to font size 36px when the page reaches a small breakpoint (mobile phone).
How can I achieve this?
Here is what I have done so far:
.title-extra-large-5 {
font-size: 70px !important;
line-height: 80px;
}
#media (max-width: 767px){
.xs-title-extra-large-4{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
<h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2>
</div>
</div>
</div>
In your question, you mention that your title is h1, but, in your example, you use h2.
Apart from that, you are on the right track. You just need to change couple of things:
h2 {
font-size: 70px !important;
line-height: 80px !important;
}
#media (max-width: 767px){
h2{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8">
<h2>MY JOB.</h2>
</div>
</div>
</div>
You do not need to refer to col-sm-12 and col-xs-12 as bootstrap will render into them by default. And you do not need to have extra classes title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4 you can just refer to h2 or h1.
I'm assuming by certain screen size, you want to change it, right?
ACCORDING TO W3SCHOOLS.COM
You can use the #media property to display a certain set of styles in a certain situation.
body{
background-color: blue; /*For screens with more than 480px screen width.*/
}
p{
font-size:72px;
}
#media screen and (max-width: 480px) { /*Same but for less*/
body {
background-color: lightgreen;
}
p{
font-size:36px;
}
}
Comparing this to your code, I'd say you've got it mostly correct, but be leniant on !important. This can conflict with other styles, so only use it when you do NOT want it to change, or the style won't be applied otherwise.EDIT: It seems you have two classes which do the exact same thing, but conflict with each other due to !important. I'd say just keep one of the classes and change the styles with #media so you're gauranteed it'll work and that it won't conflict with other styles.
In my website the top header background and the "Kreation Team" Div background are not displaying in safari on ipads and iphones but it is visible on imacs and macbooks. I mean in small devices the background images are not visible.
If you go in Chrome and safari separately you can see the difference...
Please help how to solve this?`
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron">
<div class="container-fluid">
<nav class="row pull-right hidden-xs" style="padding:20px 20px 0 0;">
<ul style="font-size: 15px;">
<li>Home</li>
<li>About Us</li>
<li>Branches</li>
<li>Gallery</li>
</ul>
</nav>
<div class="row-fluid">
<div class="col-sm-7 col-xs-7">
<h1>KREATION <br>House of Cotton</h1>
<h2 style="font-weight: bold;padding-bottom: 30px;">Srilankan Quality Handloom Manufacturer</h2>
<button class="jumbo-btn hidden-xs" onclick="
location.href='http://kreationhandlooms.com/aboutus';" alt="Kreation House of Cotton about us page">About Us</button>
</div>
<div class="col-sm-5 col-xs-5">
</div>
</div>
</div>
</div>
CSS
.jumbotron{
background-image: url("images/silk saree.jpg");
background-size: cover;
background-position: center 10%;
background-repeat: no-repeat;
background-attachment: fixed;
height: 720px;
width: 100%;
font-family: nexabold;
margin: 0;
padding: 0;
}
#media only screen and (min-width: 510px) and (max-width: 2000px){
.jumbotron .container-fluid .row-fluid{
padding:160px 0 0 10px;
}
}
#media only screen and (min-width: 100px) and (max-width: 510px){
.jumbotron .container-fluid .row-fluid{
padding-top: 80px;
}
}
.jumbo-btn{
padding:10px 20px;
border: 3px solid white;
border-radius: 5px;
font-size: 18px;
background:transparent;
transition: all 0.4s;
}
.jumbotron h1{
font-weight: bold;
}
.jumbo-btn:hover{
background-color: grey;
color: white;
border:3px solid white;
}
#media only screen and (min-width: 200px) and (max-width: 760px){
.jumbotron .row-fluid h1{
margin:0 0 30px 0;
font-size: 45px;
font-weight: bold;
}
there was an error in console too
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
Your console error is due to the fact that you are not loading jQuery in your HTML. You need to add something along the lines of:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
This may also be what's causing problems with your images. If you're still experiencing issues, it helps to have a working example. Try creating a CodePen or JSFiddle with your code, and append the link to your original post.
Edit: I just took a look at your code, and the image isn't loading on Safari mobile because of background-attachment: fixed on line 214 of stylesheet.css for the CSS class .jumbotron. If you remove that from your code, the image works fine. If you need to keep the CSS for the desktop, just use a simple media query to target mobile devices.
My portfolio website uses rows to display full-width images. These look fine on my desktop and ipad but once viewed on a phone there seems to be margins on the left and right.
Here's the code:
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-xs-12">
<img src="img/focus.jpg" class="img-responsive" alt="Focus Ireland"></a>
</div>
</div>
</div>
</section>
The site is live at http://www.burnser.com/index.html
Any help would be most grateful. Thanks in advance.
the col-xs-12 class from Bootstrap has a padding.
padding-right: 15px;
padding-left: 15px;
That padding is set to 0 in screens bigger than 768px.
So if you want to remove the padding, you could override those properties in your css file.
Need to change
.col-xs-12{
padding-right: 15px;
padding-left: 15px;
}
to
.col-xs-12{
padding-right: 0;
padding-left: 0;
}
Currently it's only set for min-width: 768px
#media (min-width: 768px)
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
I'm trying to apply a #media query so when the max-width reach 991px a padding-left will be added to the class, but nothing happens when the max-width reach 991px and the main of the page start to wrap under the aside, I'm using bootstrap and here is a part of the Code :
CSS
#media(max-width : 991px) {
.mainIcon {
padding-left: 47px;
}
}
HTML
<section class="mainin">
<div class="container-fixed mainIcon">
<div class="row mainFoto">
<div class="col-md-4">
<img src="images/code_big.png" alt="">
<a class="boutonCode">Code</a>
</div>
<div class="col-md-4">
<img src="images/tutoriel_big.png" alt="">
<a class="boutonTutoriel">Tutoriels</a>
</div>
<div class="col-md-4">
<img src="images/foucha_big.png" alt="">
<a class="boutonfoucha">PROJECTS</a>
</div>
</div>
<header class="globalTitle">
<h1 class="title">Turn Your Brean <span>On</span></h1>
<h2 class="subtitle">design the future</h2>
</header>
</div>
</section>
LIVE DEMO
when i inspect the page and try to reduce the width of the browser once he is less than 991px i see that the padding-left is not applied , i can't figure out how to fix this !
The issue appears to be that you're calling your media query at the top of the page but the regular styles for .mainIcon below it. This is causing the media query to be overwritten by the normal styles which would explain the adjusted padding-left being crossed out when you expect the element. A good rule of thumb is to always include your media queries below your other CSS (or at least under the class/id/etc. you're looking to change).
try:
.mainIcon {
width: 99%;
padding-top: 14%;
padding-left: 20%;
}
#media (max-width: 991px) {
.mainIcon {
padding-left: 47px;
}
}
#media only screen and (max-width: 991px)
{
.mainIcon {
padding-left: 47px;
}
}
or use !important
padding-left: 47px !important;