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;
}
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 used jumbotron to have a full height page on the desktop version on my website, but I want to have the normal layout (disable jumbotron) on the mobile version. Because on the mobile version, content inside the jumbotron div is going outside as it is not enough space. And below div content is overlapping those content. I'm using Bootstrap 4. My code as below,
<section class="jumbotron">
<div class="container">
<div class="content row">
<div class="col-12 jumbotron">
<div class="single-work">
<h2>Title here</h2>
<p>Text here</p>
</div>
</div>
</div>
</div>
</section>
You can use a media query like the following:
#media only screen and (max-width: 875px) {
.jumbotron {
width: 100%;
}
}
You can change the max-width on the query to the one that suits you better and the css is just placeholder there, You can hide it, change the width, remove a property or whatever. Try Playing in developer tools to find which properties should be modified and how, and then add these modifications to the media query.
Islam Elshobokshy has already answered this in his comment, I just elaborated a little.
Yes! you can hide only for mobile devices.
All you go to do is to add .d-none .d-sm-block classes to get them hidden only for mobile (xs) devices.
<section class="jumbotron d-none d-sm-block">
<div class="container">
<div class="content row">
<div class="col-12 jumbotron">
<div class="single-work">
<h2>Title here</h2>
<p>Text here</p>
</div>
</div>
</div>
</div>
</section>
For more details on hiding elements for particular devices, please
refer the bootstrap documentation:
http://getbootstrap.com/docs/4.1/utilities/display/
if you are using Bootstrap 4, you should use it's features too, like breakpoints. In the bootstar_config file you can set up your breakpoints (screen width in pixels) and accordingly style your classes.
Using media breakpoints in Bootstrap 4-alpha
For: example:
.something {
#include media-breakpoint-up(sm) { // from small resolutions
padding: 20px;
}
#include media-breakpoint-down(md) { // under medium resolutions
padding: 40px;
}
#include media-breakpoint-only(md) { // only on medium resolution
padding: 40px;
}
}
this is the css for class jumbotron from here, alter accordingly using your media query as https://stackoverflow.com/users/8505314/giwrgos-lampadaridis says.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
color: inherit;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.jumbotron > hr {
border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 15px;
padding-left: 15px;
border-radius: 6px;
}
.jumbotron .container {
max-width: 100%;
}
#media screen and (min-width: 768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px;
padding-left: 60px;
}
.jumbotron h1,
.jumbotron .h1 {
font-size: 63px;
}
}
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;
Can anyone tell me how to ensure I get white space/margin on the left hand side and right hand side when the page is viewed on a mobile phone?
My CSS is:
#maxCostSlider {
max-width:304px;
width:304px;
padding:0px;
margin-left:-6px;
}
#media (max-width: 480px) {
#maxCostSlider,#sliderScale {
margin-left: 20px;
margin-right: 20px;
}
}
HTML is:
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive" />
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-4 col-md-4">
<input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" />
</div>
</div>
</div>
This all looks good on a desktop and an iPad but when viewed on an iPhone the bootstrap-slider widget spans the entire width of the device. I would like to ensure there is always a margin of at least 20px either side of the two rows. Ideally the bootstrap-slider would scale to fit.
Hard to tell without know the exact slider component you are using, but adding this to your CSS should work:
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
However if you only want that to happen at mobile width, wrap it in a media query:
#media (max-width: 480px) {
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
}
For small device(sm) and extra small device (xs) you can call them separately.
<div class="col-sm-offset-1 col-xs-offset-1 col-md-offset-4 col-md-4"></div>
And another way you can do this by css.
#media (min-width: 240px) and (max-width: 480px) {
#max-cost {
padding-left: 20px;
padding-right: 20px;
}
}
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.