Bootstrap container content does not center when window is shrunk - css

I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.
I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.
PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.
For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.
Meanwhile, here is the markup for the main content panel:
<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
<div id="content" class="row" style="margin-left: auto; margin-right: auto;">
<div id="divContMain" runat="server" style="width: auto;">
<asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<center>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
…
</div>
</div>
The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.
I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!

It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:
d-flex justify-content-center
So you can add new css class for h1:
#MainContent_ctl00 > h1 {
text-align: center;
}
and add d-flex justify-content-center styles for div which contains your table:
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped"
id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<!-- The other code is omitted for the brevity -->
</table>
</div>
In addition, text can be aligned through text-align: center inside of <h1>.
An example:
.tableint {
font-size: 15px;
font-family: Estrangelo Edessa, Verdana;
border: Solid 1px #666666;
border-collapse: collapse;
color: Black;
}
.thint {
background-color: #EE8322;
color: Black;
font-weight: bold;
font-size: 14px;
border: solid 1px #666666;
border-collapse: separate;
font-variant: small-caps;
margin-bottom: 5px;
}
.textboxint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 14px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.dropdownint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 12px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.buttonint {
margin: 5px;
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #EE8322;
color: Black;
text-align: center;
border-top-style: groove;
border-left-style: groove;
border-right-color: Black;
border-bottom-color: Black;
height: 22px;
}
.buttonint:hover {
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #FFFFCC;
color: #006699;
margin: 5px;
}
#MainContent_ctl00 > h1 {
text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
<div class="row justify-content-center" id="content"
style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
<!-- <div id="divContMain" style="width: inherit;">may just remove -->
<div id="contentUPanel">
<div id="MainContent_ctl00">
<br>
<h1>Purchasing Requisitions</h1>
<br>
<div>
<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td align="center" class="thint" colspan="2">Filter</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request Start:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request End:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Part Number:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Account:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor No:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor Name:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input class="buttonint" type="submit" value="Search">
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
</tr>
<tr align="center" class="gridview">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr align="center" class="gridview" style="background-color:#FFE1CD;">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src=" index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
UPDATE:
I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:
<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">
<!-- The other code is omitted for the brevity -->
</div>

With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:
<div class="container-fluid mt-5" style="position: absolute;">
<div id="content" class="row" style="display: flex; justify-content: center;">
…
</div>
</div>
Now everything scales and is properly centered!

Related

Facing issue in aligning the overall content when it is responsive

I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:
and here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body{width: 400px;}
.gutter img p{width: 400px;}
.content{width: 400px;}
.social-connect {width: 100%;}
}
</style>
<body bgcolor="#EEE">
<div class="content">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>        
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Any help to fix this issue will be greatly appreciated. Thank you!
There were a few things (I think) was wrong with your HTML.
Body of the mobile device was set to 400px
content was set to 400px
I have added a new class container to change the width of the outer table on mobile devices.
Below is the update code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
.social-connect {width: 100%;}
.container{width:100% !important;}
}
</style>
<body bgcolor="#EEE">
<div class="content container">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>        
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>

CSS Responsive How to arrange pics with title below so that it will auto adjust the size on all phones and iPad [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am designing a page to be loaded on phones and iPad. I am trying to figure out how to arrange the pic as follow. 3 columns and 2 rows in container-fluid. The pic and words must resize when switching between phones and iPad. I am only displaying in portrait mode. My current code, I only specify a static height and width for all the pics but how to do it dynamically? I am also using <table> to arrange the pic and wordings, is there a better way by using div. Please help, thanks you very much.
The ideal arrangement:
My results:
JS FIDDLE DEMO
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 90%;
margin: 15px auto 5px; /* top, left and right, bottom */
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#searchClasses, label[for="searchClasses"] {
display:inline-block;
vertical-align: middle;
}
input#searchClasses {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="searchClasses"] {
width: 40px;
line-height: 30px;
}
button#btn-checkin {
display: inline-block;
padding: 8px 20px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#content{
width:100%;
margin: auto;
text-align: center;
margin-top: 8px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-plan {
display: inline-block;
height:48px;
padding: 8px 10px;
margin-bottom: 10px;
border: none;
border-radius: 10px;
background-color: #B9E5FB;
color: #000;
text-align: center;
width:95%
}
.btn-popular {
display: inline-block;
height:48px;
padding: 0px 0px;
white-space: normal;
margin-bottom: 10px;
border: none;
border-radius: 10px;
background-color: #B9E5FB;
color: #000;
text-align: center;
width:95%
}
.textUnderPic{
margin-top:2px;
text-align:center;
font-size:8px;
}
</style>
</head>
<body id="sfitness" >
<img src="https://preview.ibb.co/kJvJ5e/1847p.png" />
<div id="form-box">
<form>
<div id="input-group">
<label for="searchClasses" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Classes" id="searchClasses" readonly>
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<div id="content">
<div class="container-fluid">
<table style="width:100%;margin-left:4%">
<tr>
<td>
<img src="https://image.ibb.co/jWX2Jz/location.png" alt="location" border="0" class="float-left" style="width:17px;height:20px"/>
</td>
<td style="padding-left:9px;padding-top:9px;width:auto;text-align:left">
<p>Current Location <b>Sri Petaling</b></p>
</td>
</tr>
</table>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 5px">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB" >PERSONAL TRAINING</h5>
<p class="pull-left" style="padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="overflow:auto;padding:0px;margin-top:20px">
<table style="width:93%;margin:3%">
<tr>
<td colspan="3">
<p style ="padding-left:5px;padding-top:3px; width:100%;text-align:left">Plan your time</p>
</td>
</tr>
<tr>
<td style="width:33.33%">
<button class="btn-plan" >All</button>
</td>
<td style="width:33.33%">
<button class="btn-plan" >Morning</button>
</td>
<td style="width:33.33%">
<button class="btn-plan">Afternoon</button>
</td>
</tr>
<tr>
<td>
<button class="btn-plan">Evening</button>
</td>
<td>
<button class="btn-plan">Tomorrow</button>
</td>
<td>
<button class="btn-plan">This Week</button>
</td>
</tr>
</table>
</div>
<div class="container-fluid drop-shadow" style="overflow:auto;padding:0px;margin-top:20px">
<table style="width:93%;margin:3%">
<tr>
<td colspan="3">
<p style ="padding-left:5px;padding-top:3px; width:100%;text-align:left">Nearby Class starts in next 60 mins</p>
</td>
</tr>
<tr>
<td style="width:33%;align-self:center">
<div style="width:50%">
<img class="media-object" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
</div>
</td>
<td width="33%">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td width="33%">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
</tr>
<tr>
<td>
<p class="textUnderPic"><font color="#00B3F0">Gym</font>Sungai Besi</p>
</td>
<td>
<p class="textUnderPic"><font color="#00B3F0">Muay Thai</font>Sri Pinang</p>
</td>
<td>
<p class="textUnderPic"><font color="#00B3F0">Yoga</font>Serdang</p>
</td>
</tr>
<tr>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
</tr>
<tr>
<td>
<p class="textUnderPic" >Gym</font>Sungai Besi</p>
</td>
<td>
<p class="textUnderPic" >Muay Thai</font>Sri Pinang</p>
</td>
<td>
<p class="textUnderPic" >Yoga</font>Serdang</p>
</td>
</tr>
</table>
</div>
</div>
I have updated the fiddle for you. "https://jsfiddle.net/87qughpe/10/"
Some Notes:
Don't know which bootstrap you were using, I have used Bootstrap-4
Don't use table to write that structure, but rather use Boostrap Grid
Let the image expand as per width of container.
.worked-div p {
text-align: left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid drop-shadow worked-div" style="">
<div class="row">
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
</div>

#media code dosn't seem to work in Chrome

I have the following code, I would like the cells to collapse when the screen's width is less than a specific figure.
Normally I am used to having problems with IE, but in this case both IE and Firefox work well, it's Chrome which wouldn't react to that I'm trying to do.
Any ideas?
My code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#media screen and (max-width: 432px) {
.dynTd {display: block;}
}
</style>
</head>
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br>
Company Address<br>
Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
</html>
Turning a td into a block while leaving the tr as is will cause the browsers to compensate - according to the Tables specification,
If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
And the td elements with display:block are not 'table-cell's anymore!
Therefore, the browsers create such an anonymous table-cell. And apparently, Chrome does so in a different way than FF and IE.
The solution is to make sure this does not happen; for instance to turn all the elements in the table into blocks so that no anonymous table-cells are needed.
#media screen and (max-width: 432px) {
table, tr, td {display: block;}
}
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br> Company Address<br> Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
This will look the same in all browsers. The you can work towards a way to make it look the way you want again...

How to make a horizontally scrollable div with image thumbnails inside in bootstrap3

I am trying make a horizontally scrollable div which has 3 sub-divisions inside. The sub-divisions have 4 image thumbnails inside them each. I am having trouble to get the this layout working.
HTML
<div class="col-xs-12">
<div class="canvas-scrollable">
<ul class="list-inline clearfix">
<li class="col-xs-12 col-sm-6 col-md-4">
<table class="item-inner">
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
</table>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<table class="item-inner">
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
</table>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<table class="item-inner">
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
<tr>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
<td class="item-thumb">
<img class="img-responsive" src="images/#">
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
CSS
.canvas-scrollable{
width: 100%;
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
.canvas-scrollable .item-inner{
height: 300px;
margin: 10px;
/*white-space:nowrap;*/
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.1);
-webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}
.item-thumb{
width: 50%;
height:50%;
padding: 4px;
border: 1px solid green;
}
.item-thumb img{
height: 100%;
object-fit: cover;
}
The images won't fit inside the container divs. the height: 100% is making images occupy the entire 300px height of the outermost div.
Please edit my JSFiddle here.
Hope I was clear enough with my question
Take a look here .Were you trying to achieve something like this??
CSS :
ul.horizontal-slide {
margin: 0;
padding: 0;
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
ul.horizontal-slide li[class*="span"] {
display: inline-block;
float: none;
}
ul.horizontal-slide li[class*="span"]:first-child {
margin-left: 0;
}
Check out the updated fiddle
http://jsfiddle.net/2arvozpc/2/
#roxid : hey thanks for the solution, but the problem seems to persist.
The images are not showing up at all. I am using Bootstrap 3.3.2, so span2 doesn't exist...... I am getting something like this. The images are of size 0px X 0px !!!
When I added my own images, the list-item occupies the entire width
I feel totally stuck my friend. Not able to figure out at all what I am missing
UPDATE
Made a lot of changes and finally got this layout which adjusts dynamically
Pending Issue:
white-space: now-wrap is not working in IE10. Can someone tell me if I have to write an IE specific code for that !!

how do I Center images with text under and above using html and css?

Hello I'm new to html & css and I have a question. I'm trying to display 4 images in the center of a box next to eacht other. I'm currently using tables but that gives a lot of code in my html & css:
css:
/*box*/
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
/*table*/
table{
margin-right: auto;
margin-left: auto;
display: inline-block;
}
td,th{
padding: 20px;
}
and then way to much html:
<div id="content2">
<h4>Onze producten</h4>
<table>
<tr>
<td> Pika deken</td>
</tr>
<tr>
<td><img src="../images/baby1.jpg"></td>
</tr>
<tr>
<td>€20</td>
</tr>
</table>
<table>
<tr>
<td>School outfit</td>
</tr>
<tr>
<td><img src="../images/boy1.jpg"></td>
</tr>
<tr>
<td>€140</td>
</tr>
</table>
<table>
<tr>
<td>Bussines girl</td>
</tr>
<tr>
<td><img src="../images/girl2.jpg"></td>
</tr>
<tr>
<td>€250</td>
</tr>
</table>
<table>
<tr>
<td>Summer</td>
</tr>
<tr>
<td><img src="../images/girl1.jpg"></td>
</tr>
<tr>
<td>€99.99</td>
</tr>
</table>
</div>
Is there any way to do this more effciently ?
The design has to stay liquid.
Thanks in advance
max. simplified (ok, we could use img captions, too)
http://jsfiddle.net/EpyUb/
HTML
<div id="content2">
<h4>Onze producten</h4>
<div class="container">
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
</div>
</div>
CSS
.product {display: inline-block;}
.product img {display: block;}
You can try something like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
and css:
#content2{
margin: 30px auto;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
display: block;
padding-bottom: 10px;
}
example here:
http://jsfiddle.net/thespacebean/xGqDE/

Resources