I have a background working fine with 1024X768px but when the responsive position turns to 768X1024, my background did not extend up to the footer. In other sizes like 480x320 and vice versa my background repeats vertically. I want my background to extend when responsive position turns to 768X1024 and also in 480c320. Can you tell me the best solution for this?
I tried to use this but it's not working.
#media only screen and (max-width:768px){
.container .mybg {background-size:100%;}
}
*note: need to cut some contents.
Here's my code:
<body>
<div class="container">
<!--Background-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="mybg">
<div class="container">
<div class="row-fluid text-center">
<div class="col-sm-12">
<div class="img-thumbnail">
<img class="img-responsive center-block" src="images/winning
logo.png" alt="...">
<div class="container">
<div class="caption">
<h5>Logo Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--END OF MYBG-->
</div><!--END OF Background-->
</div>
<!--bacground pattern 2 underneath-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive center-block" src="images/BG-w-pattern_line_2.png">
</div><!--END OF bacground pattern 2 underneath-->
<div class="container">
<div class="footer">
<div class="container">
<p class="mytext-muted">Copyright © 2014. All rights
reserved. EGT Design.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS:
#media only screen and (max-width:768px){
.container .mybg {background-size:100%;}
}
.container .mybg{
background:url(../images/ContentBG.png);}
This should work
.container .mybg {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Related
I am having issues with my .parallax CSS class that is done default by the framework it's not resizing like my main image when it comes to mobile view. It works well with a desktop view. They move more to the left the last two images is there a possibility to move them more center? I tried to center them using position: no-repeat fixed center; in CSS or using frameworks default parameters.
https://i.imgur.com/itVR3No.jpg
The image goes off to the left and does not center.
$(document).ready(function() {
$('.parallax').parallax();
});
.ha-bg-parallax {
background: url(https://i.imgur.com/YqK1Oeu.jpg) no-repeat fixed center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: 100vh;
margin: 0 auto;
width: 100%;
display: table;
vertical-align: middle;
}
.parallax{
position: no-repeat fixed center;
max-width:100%;
}
.ha-bg-parallax .ha-parallax-body {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav class="blue darken-1">
</nav>
</div>
<div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
<div class="ha-parallax-body">
<div class="section scrollspy row title" id="home">
</div>
</div>
</div>
<div class="section light-blue lighten-5">
<div class="row container">
<div class="section scrollspy" id="info">
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header1" src="https://i.imgur.com/QFPutVs.jpg"></div>
</div>
<div class="section light-blue lighten-5">
<div class="section scrollspy" id="portfolio">
</div>
<!--row for parallax-->
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header2" src="https://i.imgur.com/gyYRcBK.jpg"></div>
</div>
<!--Floating Action Button custumize-->
<footer class="page-footer blue darken-1">
<div class="col l4 offset-l2 s12 container center">
<div class="section scrollspy" id="links">
</div>
</div>
I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size.
I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size.
Should I just get rid of the thumbnail class or is there any other solution?
body {
padding-top: 70px;}
.row .flex {
display: inline-flex;
width: 100%;}
img {
width:100%;
min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
</div>
</div>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/63JKK67yGUE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
</div>
</div>
<div class="row flex match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
</div>
</div>
</div>
</div>
I think the property you're looking for is object-fit
img {
width: 200px; /* You can set the dimensions to whatever you want */
height: 200px;
object-fit: cover;
}
The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.
Other values you can use with this property includes:
fill - stretch the image.
contain - preserve the aspect ratio of the image.
cover - Fill the height and width of the box.
none - Keep the original size.
scale-down - compare the differences between none and contain to find the smallest object size.
object-fit | CSS-Tricks
Add the css class img-responsive to every image.
just modify this:
img {
width: 100px; // how much you want
min-height: 100px;
float: left;
margin: 10px;
}
Go to "Inspect Element" in your browser and look for something like:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: auto; }
Change it to:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: 300px; //change as per your requirement }
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it.
In Bootstrap, there are 4 classes
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
How to decide on column display:
A page is divided into 12columns grid and width is calculated as
width: percentage((#columns / #grid-columns));
1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
there are no partial pixels so browsers rounds the number.
col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image
col-sm-12 - Class will help in stacking the image when opened on small devices
.img-center - Is custom class to defined additional properties for the image box
Hope this helps.
.img-center {
text-align: center;
border-radius: 8px;
width: 100px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<link rel="stylesheet" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
</body>
</html>
I seem to be having difficulties with a bootstrap carousel it seems to "Break" outside of the container / row. I'm not 100% sure of what kind of information I may need to provide (First time posting here for help) But here is a screenshot followed by the code (Just a typical bootstrap carousel resized)
Screenshot of error
.project01-carousel {
width:640px;
height:360px;
}
<div class="col-sm-4">
<section class="project01-carousel halfheight">
<section class="project-carousel-wrap halfheight">
<!-- Carousel -->
<div class="project-carousel owl-carousel owl-nav-sticky-wide">
<div class="project-carousel-item project-01-carousel-item-01 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render1'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-02 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render2'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-03 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render3'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-04 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render4'];
?>">
</div>
</div>
</section>
</section>
</div>
Make sure you don't have a static width for your content, and I notice you are using Owl Carousel in Bootstrap, so make sure you aren't duplicating any classes there/have Bootstrap carousel styles and js turned off so there's no conflicts.
Please note, I only used !important to overcome an img style that was overriding my 100% width call for it. You shouldn't have to use the !important tag in your code.
.project01-carousel {
/*width:640px;*/
width: 100%;
max-width: none;
height:auto;
border: 1px solid red;
}
img {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4">
<section class="project01-carousel halfheight">
<section class="project-carousel-wrap halfheight">
<!-- Carousel -->
<div class="project-carousel owl-carousel owl-nav-sticky-wide">
<div class="project-carousel-item project-01-carousel-item-01 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-02 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-03 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-04 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
</div>
</section>
</section>
</div>
First of all,you should wrap your
<div class="col-sm-4">
In a row and wrap the row in a container like this
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
And also you should remove the width for
roject01-carousel
I am building the front end of my website in bootstrap 4. I'd like one of my pages to be split into four background images each of which fills a column so that the columns stack responsively on mobile. As of now, I have the design below where I use the background-image attribute to fill each column. The images do not fill the whole column though.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="img img-profile-1">
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-2" >
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-3" >
</div>
</div>
<div class="col-md-3 text-center">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
I added the css below to the div within each column and got the full image to show but there is a strange scrolling issue and white space when I make the viewport smaller.
.img-profile-1 {
background-image: url('../img/image.jpg') !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
margin-left: -15px;
margin-right: -15px;
}
Any ideas how to get handle this responsive vs background image dilemma?
Thanks!
You don't have to add another <div> inside the .col-md-3 in order to give it a background, instead you can just give that same <div> the class of .img-profile-1 and so on.
Bootstrap 4 also adds a cool class to where it removes all white spaces between each .col, it is called .no-gutters. You can view that on the snip below.
.img-profile-1,
.img-profile-3 {
background-image: url('http://placehold.it/500/aaaaaa/000000');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.img-profile-2,
.img-profile-4 {
background-image: url('http://placehold.it/500/000000/ffffff');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3 img img-profile-1">
</div>
<div class="col-md-3 img img-profile-2">
</div>
<div class="col-md-3 img img-profile-3">
</div>
<div class="col-md-3 text-center img img-profile-4">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
Instead of setting the width and height in your css for the div, try adding class img-fluid to the image tag.
Here is the fix
If you add col-md-3 or any other column in bootstap it take right padding and left padding of 15px so that inner content will no cover full width. To cover full width we need to add another div with class row below the column so that inner content will be made to cover full width
Fixed code is given below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="img img-profile-1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-2" >
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-3" >
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="row">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
</div>
I've put together a one page site but am having problems with the top section.
It's fine on a desktop, but on any other device the three main photographs on the section stack, instead of the section expanding to allow this, the images just overflow (or are hidden if using overflow hidden property).
I'm not sure what the issue is that's causing this and would be grateful for your guidance.
Here's the html:
<!-- Jumbotron -->
<section class="jumbotron" id="header">
<div class="container">
<div class="main-photo" id="header-photo">
</div>
<div class="transparent-box" style="padding-top: 3%;">
<img src="images/logo.png" style="width: 100%;"></img>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1" style="padding-top:5%">
<div class="row">
<div class="col-md-3 col-sm-offset-1">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
</div>
<div class="row">
<a href="#quote-one" style="color: #d5b17c;">
<i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Jumbotron -->
and the css:
/* ==========================================================================
Jumbotron Section
========================================================================== */
.jumbotron {
padding: 100px 0 60px;
margin-top: 0;
margin-bottom: 0;
background: transparent url('../images/black-red-background.jpg') no-repeat top center;
background-size: auto auto;
background-attachment: fixed;
font-size: 1em;
height: auto;
overflow: hidden;
}
.jumbotron .container {
text-align: center;
}
If I understood correctly then the problem is your col-md classes cause breakpoints at the MD size which is tablets lower.
Change <div class="col-md-3 col-sm-offset-1"> to <div class="col-xs-4">
And the other 2 <div class="col-md-3" also to <div class="col-xs-4">
Is that what you want?