I have a bit of an issue with a site I am creating. I need an alternative of float: left; for these icons. below I will upload two screenshots of the mobile screen and the computer screen.
Computer Size
Mobile Size
This is my code:
.featureIcon {
width: 70px;
float: left;
}
.featureRowSplit {
padding-bottom: 30px;
padding-top: 20px;
}
.featureText {
font-family: 'Lato', sans-serif;
color: #146eff;
margin-left: 80px;
}
<div class="row">
<div class="col-md-8">
<div class="row featureRowSplit">
<div class="col-md-4">
<img src="img/FeatureIcons/1.png" class="featureIcon">
<h3 class="featureText">Cheap</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/2.png" class="featureIcon">
<h3 class="featureText">Friendly</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/3.png" class="featureIcon">
<h3 class="featureText">Clean Code</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/FeatureIcons/4.png" class="featureIcon">
<h3 class="featureText">Quick</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/5.png" class="featureIcon">
<h3 class="featureText">Helpful</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/6.png" class="featureIcon">
<h3 class="featureText">Reliable</h3>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Best Regards,
Ben J
Do want them to align in one column? If so, you can set the whole thing in an unordered list and put the image and header in there. For the css, put list-style-type:none;for the unordered list, and put display:block;and float:left; for the actual li elements.
Related
Hey StackOverFlow Community,
I need to get these images touching together. They will eventually be much larger and touching the edge of the browser. These will be tiles that lead to examples of film work, currently have placeholder images.
I have tried and tried to get these images touching, but I'm not sure what is going on... set the margin and padding to 0.
Here is the code.
HTML
<section id="video-section" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Video Production</h2>
<hr class="small">
</div>
<div class="container-fluid full-width has-inner">
<div class="row row-no-gutter">
<div class="col-md-4 nogut">
<div id="image1" class="video-item">
<a href="https://vimeo.com/208403633">
<img id="portfolio1" class="img-full-width" src="img/image1.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image2" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image2.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image3" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image3.jpg">
</a>
</div>
</div>
</div>
<div class="row row-no-gutter">
<div class="col-md-4">
<div id="image4" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id="image5" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id ="image6" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image6.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
CSS
#video-section {
padding: 10px;
background: #353030;
color: white;
}
.containter-fluid .full-width {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}
.row .row-no-gutter {
margin: 0px;
padding: 0px;
}
.nogut {
margin: 0px;
}
.img-full-width {
width: 100.5%;
height: auto;
}
Been spending a few hours trying to figure this out, what am I doing wrong?
Paddings are not on rows but on cols.
And it's not margin, so you .nogut will not work :)
You had almost the right answer, try this :
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Then in your html :
<div class="row no-gutter">
First, right click in browser and use inspect (I think it is best in chrome.) Klick on this icon. Hover over your images and you will able to see which element the gap belongs to. When clicking the element you can in the styles section untick (and add) different css properties and see what happens. Very powerfull tool.
For you, I would also recommend to add padding: 0px; to .nogot and add that class to the second row also.
JSFiddle: https://jsfiddle.net/s0m142c4/
I am trying to use foundation's grid to build a grid of photos.
I want it to look like this with all of the blocks representing photos.
:
I am, as foundation's documentation suggests, nesting two columns inside of one column, and the third column just contains its image.
HTML:
<div class="row grid-row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns grid-img port">
<img src="img/tile1-new.jpg" />
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-4 columns grid-img land">
<img src="img/tile7.jpg" />
</div>
<div class="large-4 columns grid-img land">
<img src="img/tile3.jpg" />
</div>
</div>
<div class="row">
<div class="large-4 columns grid-img">
<img src="img/tile7.jpg" />
</div>
<div class="large-4 columns grid-img">
<img src="img/tile3.jpg" />
</div>
</div>
</div>
</div>
CSS:
.grid-img{
text-align: center;
}
.grid-img img{
min-width:90%;
}
.grid-img.port img{
min-width:100%;
}
.grid-row{
height:600px;
}
But it's coming out like this instead:
Any idea how to get the images to fill their nested columns and maintain a padded grid like my example?
This is very close, you needed to use 100% width for the images and then change large-4 columns to large-6 as they were never going to take up 50% each which they needed to do.
You can now tweak bottom margin to make the layout work a little bit better. There's a really geeky way to do this which is Masonry.js or Isotope.js, it resizes containers, but might be a bit heavy handed to do what html and css can do pretty well. See below:
/*.grid-img {
text-align: center;
}
.grid-img img {
min-width: 90%;
}
.grid-img.port img {
min-width: 100%;
}
.grid-row {
height: 600px;
}
*/
.grid-img img {
width: 100%;
margin-bottom: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.css" rel="stylesheet" />
<div class="row grid-row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns grid-img port">
<img src="http://placehold.it/600x600" />
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns grid-img land">
<img src="http://placehold.it/600x600" />
</div>
<div class="large-6 columns grid-img land">
<img src="http://placehold.it/600x600" />
</div>
</div>
<div class="row">
<div class="large-6 columns grid-img">
<img src="http://placehold.it/600x600" />
</div>
<div class="large-6 columns grid-img">
<img src="http://placehold.it/600x600" />
</div>
</div>
</div>
</div>
I've put together a one page site but am having problems with the top section.
It's fine on a desktop, but on any other device the three main photographs on the section stack, instead of the section expanding to allow this, the images just overflow (or are hidden if using overflow hidden property).
I'm not sure what the issue is that's causing this and would be grateful for your guidance.
Here's the html:
<!-- Jumbotron -->
<section class="jumbotron" id="header">
<div class="container">
<div class="main-photo" id="header-photo">
</div>
<div class="transparent-box" style="padding-top: 3%;">
<img src="images/logo.png" style="width: 100%;"></img>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1" style="padding-top:5%">
<div class="row">
<div class="col-md-3 col-sm-offset-1">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
</div>
<div class="row">
<a href="#quote-one" style="color: #d5b17c;">
<i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Jumbotron -->
and the css:
/* ==========================================================================
Jumbotron Section
========================================================================== */
.jumbotron {
padding: 100px 0 60px;
margin-top: 0;
margin-bottom: 0;
background: transparent url('../images/black-red-background.jpg') no-repeat top center;
background-size: auto auto;
background-attachment: fixed;
font-size: 1em;
height: auto;
overflow: hidden;
}
.jumbotron .container {
text-align: center;
}
If I understood correctly then the problem is your col-md classes cause breakpoints at the MD size which is tablets lower.
Change <div class="col-md-3 col-sm-offset-1"> to <div class="col-xs-4">
And the other 2 <div class="col-md-3" also to <div class="col-xs-4">
Is that what you want?
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
It works fine in big screen but on the mobile it's broken to two lines. One image on the left the other on the right.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
CSS
.l{text-align: left; padding-top: 10px;}
.r{text-align: right; padding-top: 10px;}
You can use float:
HTML:
<center>
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
</center>
CSS:
.l{display: block; padding-top: 10px; float: left; }
.r{display: block; padding-top: 10px; float: right;}
http://jsfiddle.net/2jag6/
try using .pull-right on first image and .pull-left on second image. no reason to create all new classes for classes already available in bootstrap.
To keep both images in the same row in mobile view too, just add the bootstrap class col-xs-6 class next to col-md-6 class in your both divs, like:
<div class="col-md-6 col-xs-6">