I'm having a hard time targetting the second <img> tag to apply a .css rule to it but it's not working:
This is my code:
.product-highlights img:nth-of-type(2) {
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
What am I doing wrong?
As I noted in my comment above, nth-of-type only looks at siblings, so in your case target the image's parent divs instead:
.product-highlights .cell:nth-of-type(2) img{
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
pick secound div that holding image and then apply css to that image
.product-highlights .cell:nth-child(2) img{
margin: 0 4px;
}
<div class="product-highlights">
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
<div class="cell small-4">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="Discounts">
</a>
</div>
</div>
</div>
</div>
Related
I'm trying to stack these picture vertically on a small screen. So one
column instead of two
I'm trying to stack these picture vertically on a small screen. So one
column instead of two:
Here is my code:
<div class="container">
<div class="row g-0">
<div class="col-6 col-ms-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit4.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-6 xl-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit6.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit2.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/lvr.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/gym.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Here is what I tried so far:
/* Please improve your content by showing what you tried so far */
e. G. Added "some" to "thing", Edited column count, I'm not that into HTML but you get what you could write here
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: class="col-12 col-sm-12 col-md-6"
I'm trying to create a loop where I apply different styling to each odd element.
For this reason, using :nth-child(odd) would be great.
However, for some reason that I don't understand, :nth-child(odd) gets applied to each element, not just the odd ones.
I created a codepen to showcase the issue.
h3.post-title a:nth-child(odd) {
font-weight: bold;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
https://codepen.io/Pbalazs89/pen/eYjZNya
I tried selecting the elements directly (h3.post-title a:nth-child(odd) {}) and I tried selecting their parent container as well (.ts-grid-item-2 h3.post-title a:nth-child(odd) {}) The parent container is not present in the container, I just wanted to list what I tried.
With your actual selector you target every a inside you h3 title.
You have to target every a in the odd element container.
div.item:nth-child(odd) h3.post-title a {}
With this selector you target an a element inside an h3 with class .post-title inside any odd div with class .item
div.item:nth-child(odd) h3.post-title a {
font-weight: bold;
color:red;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
I have a container with a row and inside that six portfolios items.
This code when used on a small screen I get the following result:
1st line : 2 images
2nd line : 1 image on the right side
3rd line : 2 images
4th line : 1 image on the left side
Anyone got a clue? Seems like a bug to me.
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img2.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img3.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img4.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.
You can use the background-image property instead of just using <img> on the <div>.
Solution:
.portfolio-thumb {
width: 300px;
height: 200px;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
Hope this helps!
I want to create a grid of responsive images that are always squared in Bootstrap.
So far I got this: Jsfiddle Link
This part forces the elements to be squared all the time:
.frontpage_square {
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.frontpage_square img {
position:absolute;
}
The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square.
It is simple, you aren't arranging your divs properly. Make use of bootstrap by using the divs properly. Once that is done, you can make the column all same size by using this S.O. question.
jsfiddle
<div class="row">
<div class="col-sm-6 panel">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-6 panel">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
I have a layout problem, summarized in the images.
Practically, I have two rows containing span4 divs. The problem is that one div of the first row is too high and it dictates the height of the row. In the second row, I have a small div, which would be great if it could fill the empty space of the row above. Is there a css3 trick to do that?
Please, take a look at the images. I've added a jsfiddle here:
http://jsfiddle.net/XmZwh/3/
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item 1
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>items
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The html comes out of a dynamic construction of a menu, based on items stored in a CMS, so I don't have so much control over that.
the only way to do this is by having a containing div that contains a and d,
Here is a jsfiddle link: http://jsfiddle.net/jQYtd/
<div class"cont">
<div class="cont2">
<div id="a">A</div>
<div id="d">D</div>
</div>
<div id="b">B</div>
<div id="c">C</div>
and the css
.cont {
overflow:auto;
border:1px solid #ccc;
}
.cont2, #a, #b, #c {
float:left;
background-color:grey;
width:30px;
}
#a, #b, #c{
background-color:green;
height:30px;
}
#c {
background-color:red;
height:60px;
}
if you have no control over the HTML you can use jquery to add cont2 div
to do that via jquery you would do something like this
$( "#a, #d" ).wrapAll( "<div class='cont2'></div>" );