Within the structure below what is the best way to be able to align the div#logo into the middle of the grid_12 visible div for only non mobile devices.
Can I create a custom piece of code to override the above classes?
I have created a Plunker with my code - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
HTML:
<header class="row visible">
<div class="grid_12 visible">
<div class="row logo-wrap">
<!-- logo -->
<div class="grid_6">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" />
</div>
</div>
<!-- search -->
<div class="grid_6 visible">
<div id="search">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div><!--/search-->
</div>
</div><!--/row-->
</div><!--/grid_12-->
</header><!--End Header-->
Give the div with the id of logo a width and set its margin-left and margin-right css properties to auto.. also setting a max-width to 100% will ensure the responsive behaviour..
#logo{
width: 100%;
max-width: 300px; /* Original width of the logo image */
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
}
and i hope you have already done this but..
#logo img{
max-width: 100%;
height: auto;
}
UPDATE:
Modify your markup like so
<div id="container-top">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles">
</div>
<!-- search -->
<div id="search" class="visible">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
</div>
<!--/search-->
</div>
#container-top{
position: relative;
}
#search{
top: 15%;
right: 0;
}
But then you'll have to use media queries to adjust your #search css as layout changes..
Also i have made some CSS changes above (before update section)..
Only you have to write one line margin: 0 auto;
#logo
{
margin:0 auto;
}
Related
I all, i've this part of code
HTML:
<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" />
<div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" />
<div class="feature-content icon-offset">
<h4>Kollaboration</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" />
<div class="feature-content icon-offset">
<h4>Archiv</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" />
<div class="feature-content icon-offset">
<h4>Wertsachen</h4>
</div>
</div>
</div>
</div>
CSS:
.feature { margin-right: 2rem; }
What i need is
1: to center the class="feature" elements in the middle
2: have a bit of space between that elements (as is it now).
But this is result:
How can i solve it?
(Demo): https://jsfiddle.net/kf3u042k/
You can change css somthing like this
.modular .features .feature {
display: block;
float: left;
margin-bottom: 1rem;
margin-top: 2rem;
vertical-align: top;
width: 24%;
}
.feature {
margin-right: 15px;
}
Try to add this code into your stylesheet. .feature{
margin-left:auto;
margin-right:auto;
max-width:900px;
}
You have to fix the width and then put your side margin on auto. It would be something like this:
.feature{
max-width:900px;
margin-left:auto;
margin-right:auto;
padding-left: x px;
}
for the space just ad a padding-left on your feature (cf code). Still if your width is not large enough it will go bad
I'm having a problem with the input-group on my site not sizing down for xs screen sizes.
Here's the code:
<div class="gradient">
<div class="container">
<div class="row">
<div class="col-xs-1 col-s-1 col-m-2"></div><!-- /left column -->
<div class="col-xs-10 col-s-10 col-m-8">
<h1>IS IT ON NETFLIX?</h1>
<p>Search to see if your TV show or movie is available to stream on Netflix</p>
<div class="input-group searchbox">
<input type="text" id="searchInput" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button id="submit" class="btn btn-default" type="button">Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /middle column -->
<div class="col-xs-1 col-s-1 col-m-2"></div><!-- /right column -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /gradient -->
The site is isitonnetflix.net. Thanks so much!!
Wrapping the image tag with an aligned div:
<div class="" align="center"></div>
could help with it being able to sit in the middle of the div, but you could also:
<img src="" align="middle" alt="">
you could definitely change those values and it might be kind of gross to do that, but it might help.
Figured it out. Changed width on the searchbox class to 80%. Fixed!
You can also facilitate bootstraps media queries in a way that .searchbox is defined as:
.searchbox {
border-radius: 5px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
/* width: 300px; */
}
without stating its width explicitly for Xtra Small sizes you'll see it fixes too. Another solution would be to set max-width instead of width:
.searchbox {
border-radius: 5px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
max-width: 300px;
}
I have a problem with responsiveness. In my example by right side there's 30 px blank place. I don't know how the hell fix it. Does somebody have any idea? http://jsfiddle.net/98p3webw/ details details details details
.imageeee {
position:absolute;
max-width: 100%;
}
.logo{
max-width: 100%;
max-height: 100%;
}
.max{
width: 100%;
position:relative;
}
.background{
position:absolute;
width: 100%;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
height: 100%;
background-size: cover;
}
<body>
<div >
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
<div class="background col-md-12">
<div class="max">
<div class="col-md-2"></div>
<div class="col-md-8 thumbnail" style="top: 40px;" >
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
The 15 pixel spacing you are seeing are being added by Bootstrap's row class.
.row {
margin-left: -15px;
margin-right: -15px;
}
In Bootstrap, .row elements should be wrapped by a .container or container-fluid element.
From the Grid system section of the Boostrap docs:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
So wrapping your .row element in a .container should solve your immediate problem.
JSFiddle Example:
<div class="container">
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
</div>
Further Reading:
You might want to read over the Boostrap docs for the grid system so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align property instead.
The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}
Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.
You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>
Wrong:
Correct:
How to achieve that (without spaces between elements) ? They also must be centered.
HTML:
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
</div>
CSS:
.header {
display: table;
width: 100%;
height: 120px;
text-align: center;
}
.header > div {
display: table-cell;
vertical-align:middle;
}
.col {
width:20%;
}
Anyone can help with that ?
Simply set all div.col with inline-block positioning and set 'text-align:center' on your container to center it horizontally.
.container {
text-align:center;
}
.container .col {
display:inline-block;
}
Use display: inline-block.
.header {
width: 100%;
height:120px;
text-align:center;
}
.col {
display: inline-block;
vertical-align:middle;
}
Also, to remove spaces between each .col, make sure that there is no white space between each opening and closing div tag.
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div><div class="col col-2"> <!-- THIS LINE - no white-space -->
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div><div class="col col-3"> <!-- THIS LINE - no white-space also -->
Reset
Search
</div>
</div>
</div>
To get exactly what you want, you'll need an extra HTML wrapper.
http://jsfiddle.net/h37J4/
.header {
width: 100%;
height:120px;
}
.header > .row {
max-width: 360px;
margin: 0 auto;
overflow: hidden; /*quick cleafix hack */
}
.col {
float: left;
}
yoou need a wrapper for the content like this:
<div class="header container">
<div class="wrapper">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
<div class="wrapper">
</div>
And then style the wrapper with css, something like this:
.header .wrapper {
width: 70%; /* or any in px */
margin: 0 auto; /* for centering */
}
Or you can just replace your ".header" element's 100% width with smaller number!