I'm trying to create a responsive website. Everything looks great except for the footer when in mobile view the content dont seem to align perfectly.
Here are screenshots.
This is the desktop view
This is the mobile view
As you can see everything is messed up. Here's my code
<div id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-text pull-left">
<p id="color"> Supported By </p>
</div>
<div class="navbar-text pull-left">
<img class="img-responsive" src="Images/King-Abdullah-Fund-Development-Jordan-360-Panorma-Video.png" id="imageclass1">
</div>
<div class="navbar-text pull-left">
<img class="img-responsive" src="Images/Jordan-Tourism-Board-Visit-Jordan-Lolo.png" id="imageclass1">
</div>
<div class="navbar-text" id="centered">
<img class="img-responsive" src="Images/Request-a-Recording-Jordan-360-Panorama.png" id="imagecenter">
</div>
<div class="navbar-text pull-right">
<img class="img-responsive" src="Images/Oasis-500-logo-360.png" id="imageclass">
</div>
<div class="navbar-text pull-right">
<img class="img-responsive" src="Images/Ayla-Logo.png" id="imageclass1">
</div>
<div class="navbar-text pull-right">
<img class="img-responsive" src="Images/Manaser.png" id="imageclass2">
</div>
<div class="navbar-text pull-right">
<p id="color">Partners</p>
</div>
</div>
</div>
And for the CSS
#centered {
position: absolute;
overflow: visible;
left: 40%;
}
#imagecenter{
max-width: 200px;
max-height: 200px;
}
#imageclass1{
max-width: 90px;
max-height: 90px;
}
#imageclass2{
max-width: 70px;
max-height: 60px;
}
And here's my attempt on mobile view
#media screen and (min-width: 400px) {
body {
overflow: auto;
}
.img-responsive {
position:relative;
max-width: 20%;
}
#color{
font-size: 5px;
}
#footer{
max-height: 200px;
}
}
If there's an easier approach than the way I did it, I would be very thankful.
Thank you!
Forget the pull-left pull-right on each element and use col's layout (col offset will be helpfull for the centered one).
Bootstrap provides easy ways for designing responsive sites. You just add classes to your divs and bootstrap's css will do the job! You can find it here:
http://getbootstrap.com/
Related
I've got a li and applied "before" on it and put an image inside that.It's fine but the image size doesn't change when zooming in and zoom out maybe that's because of "position: absolute".
And it is also not responsive should I use media query for that?
The current code is:
.abc {
border: 1px solid black;
width: 25%;
height: 130px;
}
.abc::before {
width: 120px;
content: " ";
background-image: url(arr1.png);
background-size: 70% 70%;
background-position: 0%;
background-repeat: no-repeat;
position: absolute;
left: 36%;
top: 52%;
height: 11%;
}
<ul>
<li class="abc">
<p>Heading Item</p>
</li>
</ul>
Based on your code, you don't have a "div" u have <li> with abc class which set a background image on it. also it's not clear what you really want to achieve, but if you want to have a responsive image, this is not the way.
I suggest to take a look at bootstrap documentation, which can be the easiest way for make anything responsive .
take a look at this example for responsive images :
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
https://jsfiddle.net/emilvr/9L5cqnn1/
Update :
For make your images flexible base on browser screen size, add this calss to your images
.flexible-img {
max-width: 100%;
width: auto\9;
height: auto;
}
I am struggling with creating a responsive image gallery. I am using CSS and bootstrap, i tried with tag and as background, I couldnt get it to work.
so, this is what I want to achieve:
https://www.socialprintstudio.com/products/
image grid without image warp or overlapping
When you make your browser smaler, image aspect ratio stays the same, only the size changes and later on you get 2 per row, that I can do with col-lg-4 col-md-6 etc...
I would also prefer if I could do this with img tag as I think it is easier to fade one image to another on hover.
this is my HTML
<div class="item " data-categoryid="2">
<div class="item-image">
<div class="img-bg" style="background: url("http://laravel.dev/images/bon2.jpg"); display: none;"></div>
<div class="img-bg" style="background: url("http://laravel.dev/images/bon.jpg");"></div>
</div>
<div class="item-name">Some name</div>
<div class="item-price">price €</div>
<div class="item-button">
Button.
</div>
</div>
As you said, using bootstrap's .col classes is the way to go here:
Here's a resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/
Images, by default, will keep their aspect ratio, unless you specify both the width and the height.
For the hover effect you can have only one of the images for each box set as as position: absolute;; that way, the other image will set the size of the box.
.single-image-container {
margin-bottom: 20px;
position: relative;
}
.single-image-container img {
width: 100%;
}
.blocker {
position: relative;
overflow: hidden;
}
.hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 125ms ease-in-out;
}
.single-image-container:hover .hover-image {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
</div>
</div>
To make your images responsive add the following CSS:
.item img {
max-width: 100%;
width: 100%;
height: auto;
}
So as long as the image source is square the image will resize to its bootstrap grid
You can also try the following: CSS Tricks: Responsive Images
I'm trying to get some images to scale responsively in their parent container using the Bootstrap img-responsive class, but it's not going well. In this scenario, I want to display between 2 and 4 images in a grid pattern on the screen, and for the images to be responsive inside of their parent div.
The problem is that the images don't shrink with the img-container class.
https://jsfiddle.net/fcLv3750/2/
HTML
<div class="container-fluid">
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
CSS
.row-container {
background-color: red;
padding: 5px;
max-height: 50%;
height: auto;
}
.img-container {
padding: 4px;
max-height: 100%;
border: 5px;
border-color: black;
border-style: solid;
}
.col-sm-6 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.row-inner {
background-color: orange;
height: 50vh; //I want the page contents to resize based on browser window height (no scrolling)
width: auto;
}
NOTE: The following will make the images become responsive, but it throws off the grid by making the img-container the full height of the row, which I prefer not to do. (I do not want the img-container height to be 100%)
https://jsfiddle.net/bm83ts0p/2/
.img-container {
padding: 4px;
height: 100%; //changed from max-height:100%
border: 5px;
border-color: black;
border-style: solid;
}
img{
max-height: 100%
}
A) What is causing the img-responsive class to be ignored?
B) What can I do to make the images responsive, and the img-container div not be 100% height.
EDIT: A key feature is that the content be resized to the browser window with no scrolling, hence the height: 50vh; for each of the 2 rows.
EDIT2: Here is the desired result (which only works when the images are at max-resolution with no scaling. Large images or smaller browser window produce the problems listed above)
I have deleted your wrapper "row-inner" from your code as it causes the clearfix issue. Mostly it is reason.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Columns in Boostrap grid immediately follows row. e.g row>col to avoid any kind of clearfix issue. Hope it helps.
JS Fiddle : https://jsfiddle.net/dncwdvkq/
Demo: http://codepen.io/anon/pen/JdWrKX?editors=110
As you can see there is a responsive table inside ".panel" which you can scroll horizontally. Great.
But it makes the entire page expand horizontally and not fit in the window.
Try on small screens to see the bug.
HTML:
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="content content-primary content-sm">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="table-responsive">
<table class="table-bordered">
<tr>
<td>
<div>a</div>
</td>
<td>b</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>
</div>
CSS:
html,
body {
height: 100%;
}
#wrap {
height: 100%;
display: table;
width: 100%;
}
#wrap > nav,
footer {
display: table-row;
}
nav.navbar {
margin-bottom: 0;
}
.content-sm {
padding: 15px 0;
}
.content-primary {
background: #337ab7;
}
.content {
display: table-cell;
height: 100%;
}
td {
text-wrap: no-warp;
}
td div {
width: 900px;
}
Since the child elements of .content seems to be ignoring % width values, the work around that worked for me was:
.content > * {
width: 100vw;
}
I also added the class .table to your table element
<table class="table table-bordered">
Here is a Demo
NOTE: The vw unit only works in modern browsers. Check support here
Change the table code like this:
<div class="content content-primary content-sm">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-responsive table-bordered">
<tr>
<td>
<div>a</div>
</td>
<td>b</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
and remove this from your css file
td div {
width: 900px;
}
Try editing the width of your td's child div like this
td div {
width: auto;
}
I hope it helps fixing the bug.
If the window size is less or equal to 900px the td content will go beyond that. You should not fix the td div size in px. Use instead % (percentage).
td div
{
width: 100%;
}
The problem is that tables are by nature not responsive. You have resorted to using display table, table-row, and table-cell which are expanding beyond the veiwport with the content, and creating your undesired effects.
As you can see in this fiddle: if you remove the table elements, your width issue goes away, but then you don't get the sticky footer you're looking for.
changing your CSS to:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
background: #337ab7;
}
.page-wrap:after {
content: "";
display: block;
height: 51px;
}
nav.navbar {
margin-bottom: 0;
}
.content-sm {
padding: 15px 0;
}
.box-content {
width: 9000px;
height: 5000px;
background: red;
}
.box-responsive {
width: 100%;
max-width: 100%;
overflow-x: scroll;
border: 1px solid green;
}
You will get your desired responsive width, as well as a full height webpage with sticky footer.
I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.
I've managed to implement such a layout in CSS using absolute positioning and overflow properties, see this JSFiddle: http://jsfiddle.net/XLceP/
This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.
Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using absolute positioning for the larger screen layout.
How can I attempt to tackle this problem?
Update 2019
Bootstrap 4
Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...
<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
<nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
<a class="navbar-brand" href="#">App</a>
<ul class="navbar-nav">
<li class="nav-item">Nav</li>
</ul>
</nav>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-2 mh-100 overflow-auto py-2">
<h6>Sidebar</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="col mh-100 overflow-auto py-2">
<h3>Body content</h3>
</div>
</div>
<div class="row flex-shrink-0 bg-light">
<div class="col-12 py-2">
<p>Footer ...</p>
</div>
</div>
</div>
https://codeply.com/go/LIaOWljJm8
Bootstrap 3 (original answer)
You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...
#media (min-width: 768px){
#left {
position: absolute;
top: 0px;
bottom: 0;
left: 0;
width: 75%;
overflow-y: scroll;
}
#right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
width: 25%;
}
}
Demo: http://bootply.com/126137
I forked Skelly's bootply here while using col-xs-12 and hidden-xs.
<div class="col-xs-12 col-sm-6" id="left">
<p>Left contents</p>
</div>
<div class="hidden-xs col-sm-6" id="right">
<p>Right contents</p>
</div>
I prefer this because it avoids media queries in a css file.
You don't need Bootstrap to do what you want. You can simply modify your existing CSS to following:
#left {
float: left;
width: 75%;
height: 100px;
overflow-y: scroll;
background-color: #FC6E51;
text-align: center;
}
#right {
float: left;
overflow-y: scroll;
height: 100px;
width: 25%;
background-color: #4FC1E9;
text-align: center;
}
And then, in your media query for mobile screens, make both #left and #right flow:none, width: 100% and height: auto;
If you really want to use Bootstrap, just put both #left and #right in the following structure:
<div class="row">
<div class="col-md-8" id="left">Your Code Here</div>
<div class="col-md-4" id="right">Your Code Here</div>
</div>