I need to know that as it is determined that these lines of code contain 4 columns. I need this to be flexible. Since in some cases I occupy only 2 or 3 images. The problem I have is that no matter how many images you call, the container always contemplates having 4. I can not figure out how to modify this. I would appreciate your help.
<ul class="photo-gallery">
<li>
<figure>
<div class="gallery-item">
<a href="Asphalt_A3.jpg">
<img src="lTireBtn1.jpg" alt="">
<figcaption>
<div class="centrize">
<div class="v-center">
<i class="hc-search"></i>
</div>
</div>
</figcaption>
</a>
</div>
</figure>
</li>
<li>
<figure>
<div class="gallery-item">
<a href="Asphalt_A2.jpg">
<img src="TireBtn2.jpg" alt="">
<figcaption>
<div class="centrize">
<div class="v-center">
<i class="hc-search"></i>
</div>
</div>
</figcaption>
</a>
</div>
</figure>
</li>
<li>
<figure>
<div class="gallery-item">
<a href="Asphalt_A1.jpg">
<img src="TireBtn3.jpg" alt="">
<figcaption>
<div class="centrize">
<div class="v-center">
<i class="hc-search"></i>
</div>
</div>
</figcaption>
</a>
</div>
</figure>
</li>
</ul>
Related
Here is the code of the gridbox, I have currently.
.service-box-container{
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 15px;
}
.service-box-container img{
max-width: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 460px;
border-radius: 20px;
}
<div class="service-box-container">
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
</div>
Design I am looking to acheive:
I want to show only two items on every even row and 3 items on every odd row using grid css. This should be applicable to any additional rows as well.
Currently it is showing same style on both odd and even row. Here, is the https://jsfiddle.net/fk9y0uhd/3
Use grid-row-start and grid-row-end properties same like for column as well grid-col-start and grid-col-end to make this layout. this will help you out
https://www.youtube.com/watch?v=xBSlwwitD5U&t=867s check. OR use 3 column grid for odd one and 6 column grid for evens.
So im working on my portfolio for a class project and Im struggling with aligning my projects on a single row. Here is what I have / need help with....
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/JwLQoj" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/8TGwqfY.jpg" alt="project">
<div class="project-tile">Howard Stern Tribute Page</div>
</a>
</div>
</div>
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/Jwemdd" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/UtN8xFJ.jpg" alt="project">
<div class="project-tile">Product Landing Page</div>
</a>
</div>
</div>
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/xmoWLB" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/lY9IvVn.jpg" alt="project">
<div class="project-tile">UFO Sighting Survey</div>
</a>
</div>
</div>
</div>
</div>
First thing I noticed was that you have too many closing </div> tags. You should indent your code properly so it would be easy to notice that. I added img-fluid class to images so they are responsive and do not overflow the container.
Check out the snippet below in full screen.
I removed many elements and I left what was important to solve the problem. i hope it helps.
You should also check out Bootstrap documentation, you have everything there. LINK
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/8TGwqfY.jpg" alt="">
<div>Howard Stern Tribute Page</div>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/UtN8xFJ.jpg" alt="">
<div>Product Landing Page</div>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/lY9IvVn.jpg" alt="">
<div>UFO Sighting Survey</div>
</a>
</div>
</div>
</div>
<title>food</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src=""/>
</div>
<ul class="main-nav">
<li> Food Delivery</li>
<li> Food orders</li>
<li> Our Cities</li>
<li> Services</li>
</ul>
</div>
<div class="hero">
<h1>Welcome To <br> Luke's LandScaping Services</h1>
<div class="button-awesome">
Show me more
I'M Hungry
</div>
</div>
</header>
<section class="features">
<h3 class="text-centre">Professional Gardening Services Designed to Suit Your Preferences </h3>
<p class="copy">
</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<i class="fa fa-certificate"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-camera"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-envelope"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-cog"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
</div>
</div>
</section>
<section class="meal">
<ul class="meal-showcase">
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
</ul>
</section>
<section class="area">
<h3 class="text-centre"> We Are Currently In These Areas</h3>
</section>
</body>
trying to get a margin- top from the image to separate them but not working for some reason
tried googling it and nothing helped im lost ha
.area
{
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(lawnGarden.jpg);
height:100vh;
background-position:center;
background-size:cover;
background-attachment: fixed;
display:inline-block
margin-top:100px;
}
this is just me practicing and learning im new to this
Remove the display-inline CSS property and try it.
I'm having trouble figuring out mobile view layout problem. When I view my site via mobile, the section shrinks accordingly instead of showing full width image and stacked. How do I fix it so that the boxes sit above each other when viewed via mobile? I am using Bootstrap.
<section class="health" id="health">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title st-center">
<h3>Places to exercise</h3>
</div>
<div class="grid">
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2><span>EAST COAST PARK</span></h2>
<p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
It might be that you gave the figure or any other element the picture is nested in a fixed hieght, you can fix in css that with height: auto;
the best way to do this would be to look at adding col-span to each of the images for example, using col-span-4 on three images would allow them to stack nicely against each other in desktop but then in mobile view they would automatically drop under each other due to the default css
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/1.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/2.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/3.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/4.jpg" alt="">
</a>
</div>
Maybe I'm over thinking this.. How can I have an odd number of thumbnails using Bootstrap's grid. I have 7 thumbnail images at the bottom. I'd like to space them out of course using the grid. Maybe this isn't possible and should just use regular CSS?
Here's what I tried:
<div class="row-fluid">
<div class="span12">
<ul class="thumbnails">
<li class="span1">
<div class="thumbnail">
<img src="img/diningroom/1.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/2.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/3.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/4.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/5.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/6.jpg" alt="">
</div>
</li>
<li class="span1">
<div class="thumbnail">
<img src="img/diningroom/6.jpg" alt="">
</div>
</li>
</ul>
</div>
</div>
You can customize bootstrap columns here (see #gridColumns).