I made a footer with html, css and bootstrap and it's responsive to some kind of exctent but when it gets to mobile size instead of the images being in a row they stack up and gets in a column, how can i fix this? I want i to be the same when it comes down to mobile size as it is when it is in desktop size. I hope you understand, sorry for my bad english. Here is the html:
/*Facebook*/
.fb-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
/*Twitter*/
.twitter-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
/*Mail*/
.mail-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
.container {
margin-top: 120px;
width: 30%;
}
#media (max-width: 767px) {
/*Facebook*/
.fb-icon img {
width: 70px;
height: 70px;
display: block;
margin: auto;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<footer class="container">
<div class="row">
<!-- Facebook -->
<div class="col-sm-4 col-xs-4">
<a target="_blank" class="fb-icon" href="https://www.facebook.com/OxybinTravel"><img onmouseover="this.src='Travel/facebook-2-color.png'" onmouseout="this.src='Travel/facebook-2.png'" alt="Facebook icon" src="Travel/facebook-2.png"></a>
</div>
<!-- Twitter -->
<div class="col-sm-4 col-xs-4">
<a target="_blank" class="twitter-icon" href="https://twitter.com/oxybintravel"><img onmouseover="this.src='Travel/p-color.png'" onmouseout="this.src='Travel/p.png'" alt="Twitter icon" src="Travel/p.png"></a>
</div>
<!-- Mail -->
<div class="col-sm-4 col-xs-4">
<div class="tool-tip">
<a target="_blank" class="mail-icon" href="#"><img onmouseover="this.src='Travel/email-color.png'" onmouseout="this.src='Travel/email.png'" alt="Mail icon" src="Travel/email.png"></a>
</div>
</div>
</div>
</footer>
By default, if you check your bootstrap you will see that bootstrap is using col-sm-4 on mobile devices and has a max-width: 100% css property. Just add this css snipped into your media query
#media (max-width: 767px) {
/*Facebook*/
.col-sm-4 {
max-width:33.3%;
display:inline-block;
}
....
}
Related
I have the mobile version of a static page looking good (although I am not sure if the HTML setup is ideal). I took the button out of the the .product-info class so I could use flexbox's order property and move it to below the product image on mobile. However, this leaves me unsure of how to go about styling the desktop version. I'm trying to get .product-info (blue), the 'get' button, and .store-info (green) each on their own separate lines. What is the best way to structure and style for the desktop version using flexbox without affecting the mobile layout? Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snapshelf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="product-page.css" type="text/css">
</head>
<body>
<!-- Navigation -->
<nav class="header navbar navbar-light bg-faded">
<div class="nav navbar-nav container">
<a class="nav-item nav-link active" href="#">Snapshelf <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" style="float: right">Store Account</a>
</div>
</nav>
<!-- Holds product image and information -->
<div class="product container">
<!-- Displays front or back of product -->
<div class="product-image">
<img src="front.jpg" class="main-image img-fluid" alt="" />
<img src="back.jpg" class="secondary-image" alt=""/>
</div>
<!-- Displays product information -->
<div class="product-info">
<p class="brand-name"><b>Brand Name</b></p>
<p class="product-desc">Product Name</p>
<p class="price">$100</p>
</div>
<!-- Get button -->
<div>
<button class="get-button btn btn-default btn-lg">Get</button>
</div>
<!-- Store information -->
<div class="store-info">
<div>
<b>From</b><br>
Store Name
</div>
<div style="margin-top: 10px">
<b>Where</b><br>
Store Location<br>
www.storeurl.com
</div>
</div>
</div>
</body>
</html>
CSS
/* Large screens */
#media only screen and (min-width: 768px) {
.body {
font-family: 'Roboto', sans-serif;
}
.header {
margin-bottom: 40px;
border: 1px solid green;
}
.product {
display: flex;
border: 1px solid red;
}
.product-info {
border: 1px solid blue;
}
.get-button {
margin-top: 20px;
border-radius: 2px;
}
.product-image {
display: flex;
flex-direction: column;
}
.main-image {
height: 500px;
width: 500px;
margin-right: 20px;
}
.secondary-image {
height: 150px;
width: 150px;
margin-top: 20px;
}
.price {
margin-top: 10px
}
.store-info {
border: 1px solid green;
border-radius: 2px;
padding: 10px;
margin-top: 40px;
text-align: center
}
}
Just set your flexbox container to flex-direction: column in your desktop media query.
#media only screen and (min-width: 768px) {
.product {
display: flex;
flex-direction: column;
border: 1px solid red;
}
}
I'm displaying images of A4, A5, Quarto etc sized products in a responsive grid and and using max-width: 70%; (and other percent values) am able to take arbitrarily sized images and display them in correct scale. This is working well in about 10 browser/OS combos - except Win 10/IE11
Good display:
Here each cell in the grid (<div class="product">) has a black outline and contains an image wrapper in red (<div class='productimage'>) plus other wrapper divs the the text and price. Using a jquery solution here I have made all the grid cells the same height.
In IE11 the images seem to refuse to scale and want to render full size instead of a percent of their container's width:
Removing display: table-cell; from the .productimage class that wraps the image gives this on IE11:
So size is now correct again, but image is at top of the div. I tried this and similar solutions based on position: relative / position: absolute but cannot get it to work, as, I think, my divs do not have a fixed height, and/or height is set by jquery.
Codepen
http://codepen.io/anon/pen/ENNvbZ
function equalize() {
var $maxImgHeight = 0;
var $maxTxtHeight = 0;
$('.productrow .productimage').each(function(i) {
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i) {
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
displayWindowSize();
}
function equalizeOnResize() {
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin: 0px;
}
.centered_content {
max-width: 1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.quarto_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.pocket_diary_image {
max-width: 40%;
margin-left: auto;
margin-right: auto;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding: 10px 20px;
margin: 0px;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {
width: 50%;
}
.product:nth-child(2n+1) {
clear: left;
}
}
#media (min-width: 800px) and (max-width: 999px) {
.product {
width: 33.3%;
}
.product:nth-child(3n+1) {
clear: left;
}
}
#media (min-width: 1000px) {
.product {
width: 25%;
}
.product:nth-child(4n+1) {
clear: left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding: 4px;
}
/*
display: table-cell; seems to be causing IE problem, when removed
the image are displayed at the correct size and within the DIVs, but
not aligned to the bottom
*/
.productimage {
display: table-cell;
text-align: center;
vertical-align: bottom;
height: 100%;
outline: 1px dashed red;
}
.product_todetails {
outline: 0px solid black;
display: table;
width: 100%;
padding: 4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {
background-color: #444;
border: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->
You could use flexbox instead. More suitable for layout than display: table/table-cell
Note, you need to add prefixed flexbox property for amongst other IE10
Updated/Added CSS rules
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
Sample snippet
function equalize(){
var $maxImgHeight =0;
var $maxTxtHeight =0;
$('.productrow .productimage').each(function(i){
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i){
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
//displayWindowSize();
}
function equalizeOnResize (){
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin:0px;
}
.centered_content {
max-width:1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
}
.quarto_diary_image {
max-width: 100%;
}
.a5_diary_image {
max-width: 70%;
}
.a6_diary_image {
max-width: 50%;
}
.pocket_diary_image {
max-width: 40%;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding:10px 20px ;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {width: 50%;}
.product:nth-child(2n+1){
clear:left;
}
}
#media (min-width: 800px) and (max-width: 999px){
.product {width: 33.3%;}
.product:nth-child(3n+1){
clear:left;
}
}
#media (min-width: 1000px) {
.product {width: 25%;}
.product:nth-child(4n+1){
clear:left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding:4px;
}
/* ***************************************
used flexbox here instead of table-cell
*/
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
/* ***************************************
*/
.product_todetails {
outline: 0px solid black;
display:table;
width: 100%;
padding:4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {background-color: #444;border:black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default ">
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->
Tables are so problematic. The cells are forced to be at least as big as the contents, but if you use percentages in the contents then it's a circular definition.
So CSS2.1 left lots of these things as undefined behavior, and therefore browsers behave differently. Now CSS Tables Module 3 is attempting to fix this but it's not stable yet.
What usually works for me is:
Position the cells relatively
Position the contents absolutely
Use top, right, bottom and left to size and place the contents as desired inside the cell.
I cannot center my bootstrap thumbnail images no matter what I try on tablet size and smaller. Once thumbnails reach thoses sizes they no longer scroll to stay center of screen. I have tried everything I can think of from adding center block to both my thumbnail class's and my img responsive class's HTML to text-algin center and margin auto 0. Nothing changes.
Here is my html
<div class="portfolio">
<div class="container">
<a name="porty"></a>
<h1 class="text-center" id = "port">My Work</h1>
<div class="row">
<div class="col-md-4">
<div class="thumbnail ">
<div class="caption">
<h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <i class="fa fa-codepen fa-5x fa-fw" id="first"></i>
</div>
<img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute">
</div>
<legend>Tribute page</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="second"></i>
</div>
<img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google">
</div>
<legend>Google homepage</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i>
</div>
<img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon">
</div>
<legend>Cannon game</legend>
</div>
</div>
Here is my CSS
/*Portfolio*/
.portfolio {
background-color:#706C61;
padding-top: 50px;
padding-bottom: 100px;
display: inline-block;
width: 100%;
height: 800px;
position:relative;
}
.portfolio h1 {
font-size: 65px;
font-family: "Roboto",serif !important;
color: #0d0d0d !important;
}
.row {
padding-top: 100px;
}
.thumbnail {
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid black !important;
border-radius: 5px !important;
}
.caption img {
flex-shrink: 0;
max-width 100%;
max-height: 100%;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(128, 128, 128, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: center;
color: #fff !important;
z-index: 2;
font-family: "Montserrat",serif !important;
}
.caption a {
text-decoration: none;
color: white;
}
.caption h4 {
position: relative;
left: 5px;
bottom: 10px;
font-size: 25px;
}
.caption i:hover {
color: orange !important;
}
legend {
font-family: "Roboto",serif !important;
border-bottom: none !important;
color: #0d0d0d !important;
font-size:22px; !important;
height:200px;
}
#first {
position: relative !important;
bottom: -35px !important;
}
#second {
position: relative !important;
bottom: -35px !important;
}
#icon {
position: relative;
top: 30px;
}
#media screen and (min-width:767px) and (max-width:1199px) {
#first {
position: relative;
bottom: 20px;
}
#icon {
top: 50px !important;
}
.caption h4 {
font-size: 20px;
}
}
#media screen and (min-width:767px) and (max-width:991px) {
#first {
position: relative;
top: 50px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
.caption i {
position: relative;
top: 50px;
}
#icon {
position: relative;
top: 65px !important;
}
.caption .fa {
font-size: 50px;
}
}
#media screen and (max-width: 1200px) {
.portfolio h1 {
font-size: 55px;
}
}
#media screen and (max-width: 991px){
.thumbnail {
height: 369px;
width: 440px;
position: relative;
right: -142px;
bottom: 48px;
}
.portfolio{
height: 2650px;
}
#profile li {
position: relative;
left: 60px;
}
.caption h4 {
font-size: px !important;
}
.caption .fa {
font-size: 80px !important;
}
legend {
height: 80px;
position: relative;
left: 139px;
bottom: 53px;
}
}
#media screen and (max-width: 965px) {
.portfolio {
margin-top: -150px !important;
}
}
#media screen and (max-width:767px) {
#first {
position: relative;
top: 25px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
#port{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: -1285px;
left: 0;
bottom: 0;
right: 0;
}
.thumbnail {
position: relative;
bottom: 0px;
}
legend
{
position: relative;
bottom: 13px;
}
}
#media screen and (max-width: 454px){
.caption h4{
font-size:25px;
}
#first{
top:15px;
}
#second{
top:15px;
}
}
#media screen and (max-width:400px) {
#icon {
position: relative;
bottom: 20px;
}
}
#media screen and (max-width:397px) {
#icon {
position: relative;
top: 0px;
}
}
#media screen and (max-width:390px) {
#first{
top:5px;
}
}
#media screen and (max-width:325px) {
.caption .fa {
font-size:60px;
}
}
#media screen and (max-width:307px) {
#first{
top:-5px;
}
}
/*End Portfolio*/
Here is the website
And finally here is a screenshot of what I am experiencing any help would be greatly appreciated thanks!
Instead of just using class="col-md-4" you should include "instructions" for Bootstrap at different screen sizes. Using multiple classes like class="col-xs-12 col-sm-6 col-md-4" would adjust the number of columns at the various screen sizes, making it easy to center the contents of each column, and just use the "img-responsive" class on the images so they will always fit in the column they are in. Then when the screen size is smaller, fewer columns will be displayed but the content of the column remains the same and stays centered in the column. If you want to center the column on the screen without filling the width of the screen (like to use col-xs-10 so it doesn't fill the width of 12 col's) then use the col-x-offset-x class to create a "blank" column to the left of where your div will display. You can use combinations of screen sizes and offsets as needed. The grid makes it really easy to get the alignment you want at different sizes without having to use CSS to define exact pixels for margins and whatnot. Once you start overwriting the CSS with "other instructions" as far as height/width go, things can get goofy...
Your fixed-navbar are with a width bigger than lower resolutions, theres alot of blank space on the right when you drop the resolution. I recommend you start developing your website following this basic bootstrap responsible template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Bare - Start Bootstrap Template</title>
<!-- Custom CSS -->
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.7</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
Rebase your website inside the .container and link your style and keep going.. I hope it helps you to understand better the concepts of bootstrap, i cannot do the whole job for you after all you are a full stack developer.
We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.
I'm not 100% sure but I think I need a media query but I am kinda new to formatting CSS.
HTML:
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<br>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" /></a>
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" /></a>
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" /></a>
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" /></a>
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
CSS:
ul.press {
display: table;
width: 100%;
text-align: center;
}
ul.press > li {
display: table-cell;
}
Thanks
What you're looking for can be easily achieved with a few lines of CSS. You can view the CSS I've created (and documented) in this JSFiddle: https://jsfiddle.net/8oLxr7ke/
.press {
display: block; /* Remove bullet points; allow greater control of positioning */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
}
.press li {
display: inline-block; /* Get all images to show in a row */
width: 25%; /* Show 4 logos per row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
In essence, what my code does is:
Set up a rudimentary grid system
Show four logos on large screens
Show two logos on medium screens
Show only one logo on small screens
If you don't want to be restricted to showing a set number of logos, you could do the following:
View on JSFiddle https://jsfiddle.net/5m0whf3k/
.press {
display: table; /* Required for table-cell to work on li's */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
text-align: center; /* Centre align grid items */
}
.press li {
display: table-cell; /* Get all images to show in a row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
#media (max-width: 960px) {
.press {
display: block;
}
.press li {
display: inline-block;
}
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Five</span>
</li>
</ul>
</div>
Important note:
In your HTML code there were closing </a> tags after the <img> tags but no opening <a> tags - this is invalid code. In my example I have removed those for you.
Also, you shouldn't need the <br> between the <h2> and the <ul class="press"> as the press list will be full width and on its own row thanks to the display: block;.
Try adjusting your viewport, if the problem persists, then opt in for media queries
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("header1").classList.toggle("relative");
document.getElementById("button_icon").classList.toggle("change_icon");
}
.wrap{
min-height: calc( 100vh - 86px );
}
a{
text-decoration: none;
color: #666666;
}
header{
text-align: center;
}
header div ul{
}
#first_h1{
color: #000000;
float: left;
margin: 10px 0;
}
#slider{
text-align: center;
border: 1px solid #34c489;
background: linear-gradient(to top, #34c489, rgba(52, 196, 137, 0.30), rgba(52, 196, 137, 0)), url("../img/england_landscape_2-wallpaper-2880x1620.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.boxing{
max-width: 70%;
margin: 0 auto;
}
#img_of_slider{
padding: 0;
margin: 0;
width: 100px;
padding-top: 20px;
}
div header div ul li{
font-size: 1em;
}
/*==================*/
.dropbtn {
color: white;
padding: 16px;
border: none;
height: 56px;
width: 56px;
background-position: center;
background-size: 60%;
background-color: black;
background-repeat: no-repeat;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.5em;
}
.dropdown-content li{
padding: 5px 0;
}
.dropdown-content li a{
color: #fff;
}
.dropdown-content li:hover{
background-color: rgba(64, 247, 171, 0.36);
}
.show {
display: inline;
width: 100%;
position: absolute;
left: 0;
top: 56px;
background-color: #34c489;
}
.relative{
position: relative;
}
.change_icon{
background-position: center;
background-size: 60%;
background-color: green;
background-repeat: no-repeat;
}
#media screen and (min-width: 680px) {
#first_h1{
float: left;
padding-left: 40px;
color: #000000;
margin: 10px 0;
}
.dropdown-content li{
display: inline-block;
padding-right: 20px;
font-size: 1em;
margin: 10px 0;
}
.dropdown-content li a{
color: #000000;
}
.float{
float: left;
width: 28%;
padding: 2%;
}
.clear_fix::after{
content: "";
display: table;
clear: both;
}
#img_of_slider{
width: 250px;
}
.dropbtn{
display: none;
}
.dropdown-content{
display: block;
float: right;
padding-right: 50px;
margin: 0;
}
.dropdown-content li:hover{
background-color: transparent;
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normaliz.css"/>
<link rel="stylesheet" href="css/about.css"/>
<title>Best city guide | Baneh</title>
</head>
<body>
<div class="wrap">
<header id="header1">
<div class="clear_fix boxing">
<h1 id="first_h1">city</h1>
<div class="dropdown">
<button onclick="myFunction()" id="button_icon" class="dropbtn"></button>
<ul id="myDropdown" class="dropdown-content">
<li>home</li>
<li class="active">about</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
</div>
<div style="clear: both"></div>
<div id="slider">
<img id="img_of_slider" src="img/manager.png" alt="city icon"/>
<h1>Best City Guide</h1>
<h3>city</h3>
</div>
</header>
</div>
</body>
</html>
I have been stuck on something very simple for over a day now and I have to ask for help. I am trying to do something simple as centering vertically my social media icons in my footer. I tried to take the same route when someone helped me with the Navigation Bar but I just cannot seem to grasp/understand something to get the same result.
I thought about doing padding but I was not sure if that still would take care of re-sizing or smaller screens, so I wanted to take more a percent route instead of flat amount.
Website for Inspect
Footer HTML:
<!-- Social Media + Footer -->
<div class="container">
<div class="navbar navbar-fixed-bottom">
<div class="collapse navbar-collapse">
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav">
<li>
<img src="link/ico-facebook.png"
alt="Facebook Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
<li>
<img src="link/ico-twitter.png"
alt="Twitter Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of Social Media + Footer -->
CSS:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 0 0 0;
position: relative;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.navbar {
position: relative;
min-height: 100px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
#media (min-width: 768px) .navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse {
text-align: center;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.collapse {
display: none;
}
#media (min-width: 768px).navbar-nav {
display: inline-block;
float: none;
vertical-align: middle;
margin: 0;
}
.navbar-nav {
margin: 7.5px -15px;
text-align: center;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
#media (min-width: 768px).navbar-nav>li {
display: inline-block!important;
}
.nav>li {
position: relative;
display: inline-block!important;
}
img.element.style {
width: 100%;
height: auto;
max-width: 32px;
}
img {
vertical-align: middle;
}
You could do it by apply some custom CSS to your HTML elements:
<div class="navbar navbar-fixed-bottom" style="display: table !important; width: 100%;">
<div class="collapse navbar-collapse" style="vertical-align: middle;display: table-cell !important;">
......
......
</div>
</div>
I was the one who answered you the first time, so here I go again to make sure you understand how it works.
First, let's do a tiny change in your HTML markup, as follows:
<!-- Social Media + Footer -->
<div class="container">
<div class="navbar navbar-fixed-bottom">
<div class="collapse navbar-collapse vertimid">
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav">
<li>
<img src="link/ico-facebook.png"
alt="Facebook Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
<li>
<img src="link/ico-twitter.png"
alt="Twitter Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of Social Media + Footer -->
If you pay attention, I have only added the class .vertimid to the line
<div class="collapse navbar-collapse">
we do this in order to accurately target that class so you can re-use it later, as I told you the other day.
Now, you do add this property to
.navbar-collapse.vertimid{display:inline-block} /* replaces display:table */
and that's it.
Remember: you need to vertical align elements relative to the container block. Also, as we're at it, be sure to check your site in Firefox, because you'll find out your social media icons aren't there
Decide what height percentage of the footer you want your social media icons to be...suppose 30%:
ul.nav {
height:30%;
margin-top:35%;
margin-bottom:35%;
}