I have created a landing page for a SharePoint site with graphics. I have noticed that when resizing the browser window to that of something like a tablet or mobile device, the page/graphics aren't responsive and adjusting to the sizing.
I came across a few posts in relation to my issue, but none were very helpful.
Here is my HTML/CSS:
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<head>
<h1><strong>G3G Controls</strong></h1>
</head>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
You have used flexboxes that was enough to make stuff responsive the property you were lacking was setting a flex-wrap:wrap for the .center class which will let the images wrap to the next line as soon as the width of the container element reduces.
AlsoThe .img_container for the images was creating an issue due to its width:70% and it also needs to be set to display:flex which will allow these images to accommodate side by side as you want. I also changed The container element .center width to 100%.
The Proposed Code
html, body {
margin: 0;
height: 100%;
}
.img_container {
display:flex;
border: none;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 100%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
width:100%;
display: flex;
justify-content:center;
flex-wrap:wrap;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<h1>The Topic</h1>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
One Important thing - In your code snippet in the HTML you have declared a <h1> heading at the top inside a <head> tag. Pls don't do this <head> tag is always used outside the <body> element that too to declare meta data which doesn't supposed to be visible in the browser. Their are other semantic tags to use inside the <body> element and I think you might have got confused with <header> tag which can be used inside the <body> element.
Do tell me whether I was of any Help :)
Related
I've been asked to design this section of a webpage from figma
Using the figma tools I can see that it is a card of 453 x 512 px and has a padding of 30px on top left and bottom and image is 393 x280 px . There is a 30px margin between the card image and card body after which it is a standard h1 paragraph and link tag. The following is my code implementation.
.blog {
display: flex;
flex-direction: column;
align-items: center;
}
.blog .icons {
display: flex;
flex-direction: row;
}
.card {
width: 453px;
height: 512px;
padding: 30px;
}
<section class="blog">
<h1>We have Most of Popular Departments</h1>
<div class="icons">
<div class="card">
<img src="./assets/ai.svg" alt="image1" class="top" />
<h3>Artificial Intelligence</h3>
<p>
Assertively parallel task synergistic deliverables after high-quality.
</p>
Learn More
</div>
<div class="card">
<div class="card-top">
<img src="./assets/civil.svg" alt="image1" />
</div>
<div class="card-body">
<h3>Civil Engineering</h3>
<p>
Assertively parallel task synergistic deliverables after high-quality.
</p>
Learn More
</div>
</div>
<div class="card">
<img src="./assets/business.svg" alt="image1" class="top" />
<h3>Business Strategy</h3>
<p>
Assertively parallel task synergistic deliverables after high-quality.
</p>
Learn More
</div>
</div>
<button class="btn btn-secondary">View All Departments</button>
</section>
This what my card looks like:
I figured out a solution and it works pretty well. Here is the code.
<div class="cards">
<div class="card">
<img src="/Untitled.png" alt="" />
<div class="container">
<h1>Artificial Intelligence</h1>
<p>
Assertively parallel task synergistic deliverables after
high-quality.
</p>
<a href="#"
>Learn More <i class="fa-solid fa-arrow-right-long"></i
></a>
</div>
</div>
<div class="card">
<img src="/Untitled.png" alt="" />
<div class="container">
<h1>Artificial Intelligence</h1>
<p>
Assertively parallel task synergistic deliverables after
high-quality.
</p>
<a href="#"
>Learn More <i class="fa-solid fa-arrow-right-long"></i
></a>
</div>
</div>
<div class="card">
<img src="/Untitled.png" alt="" />
<div class="container">
<h1>Artificial Intelligence</h1>
<p>
Assertively parallel task synergistic deliverables after
high-quality.
</p>
<a href="#"
>Learn More <i class="fa-solid fa-arrow-right-long"></i
></a>
</div>
</div>
</div>
In styles.css
.cards {
display: flex;
}
.cards .card {
margin-right: 31px;
}
.cards .card:last-child {
margin-right: 0px;
}
.card {
height: 512px;
width: 453px;
padding: 30px;
border-radius: 20px;
transition: 0.3s all ease-in;
}
.card:hover {
box-shadow: 0px 4px 4px #2b2a2a;
}
.card img {
width: 393px;
height: 280px;
border-radius: 20px 20px 0 0;
}
.card h1 {
font-weight: 700;
font-size: 24px;
line-height: 34px;
}
.card p {
font-size: 1.125rem;
overflow: auto;
color: #6f6f76;
max-width: 393px;
}
.card a {
text-decoration: none;
color: #ffa502;
}
Output looks like this :
Now I have encountered a new problem. When I am building out the entire container whose specification is as follows :
The h1 and cards are enclosed in a container of 1421 x 698 px and there is a h1 which is centered in the container with a dimension of 443 x116 px. Now if I want to apply a height and width to a inline element I should set it as display:inline-block and apply height and width properties. But when I do so this happens :
Why is the width and height of a h1 element affecting the elements of card ?
HTML Code:
<section class="cards-container">
<h1>We have most popular departments</h1>
<div class="cards">...</div>
</section>
Styles.css :
/* Cards Container */
.cards-container {
width: 1421px;
height: 698px;
/* display: flex;
flex-direction: column; */
}
.cards-container h1 {
font-size: 40px;
display: block;
width: 443px;
height: 116px;
align-self: center;
text-align: center;
}
based on my question above, below is my current design when in webview
From the picture above, there a three circles which in horizontally. But, when I change it to phone view (landscape), it will be like below:
The three circles become to big. Now, how to fix the size so that it not become bigger?
Below is my current code:
<head>
<style>
.prolist {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.img2{
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
width: 60.2%;
}
.span1{
font-weight: bold;
text-decoration: underline;
}
.center {
text-align: center;
}
#media screen and (max-width: 425px) {
.prolist {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img2 {
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
flex-wrap: wrap;
width: 30%;
}
}
</style>
</head>
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col10 paddingLR left">
<img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col2 paddingLR right">
<div class="row center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
If you want to make it responsive, you can use a responsive CSS framework like bootstrap.
Here the bootstrap version of your Code :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col col-10 paddingLR left">
<img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col col-2 paddingLR right">
<div class="center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
I have fixed the problem.Now the size will not be big when in mobile view.
<html>
<head>
<style>
.prolist {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.img1{
width:92%;
}
.img2 {
border-radius: 50%;
position: static;
border-style: solid;
border-color: #53bbeb;
width: 50%;
height: 50%;
}
.item2 {
width: 15%;
height: 100px;
margin-top: -600px;
margin-right: auto;
margin-left: 1px;
/* margin-bottom: 3000px; */
/* top: -100px; */
float: right;
}
.span1 {
font-weight: bold;
float: right;
width: 15%;
padding-top: px;
margin-top: -720px;
text-decoration: underline;
}
.center {
text-align: center;
}
#media screen and (max-width: 425px) {
.prolist {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img2 {
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
flex-wrap: wrap;
width: 30%;
}
}
</style>
</head>
<Body>
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col10 paddingLR left">
<img class="img1" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col2 paddingLR right">
<div class="row center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
</Body>
</html>
I am new to web development and I am trying to make a website for sorting my pictures in CSS, HTML5. What I want the sorting to look like the text separates the images like a new paragraph.how it looks I tried to add
<br />
but that did not work as I expected. Thanks for any help I can get :)
#pics {
margin-top: 10px;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.pics-text {
font-family: 'Roboto', sans-serif;
font-size: 36px;
color: #ffffff;
opacity: 87%;
}
.pic-item {
float: left;
position: relative;
width: 20%;
padding-top: 5px;
padding-right: 7px;
}
.pic-item a img {
width: 100%;
border-radius: 5px;
}
<div id="pics">
<h2 class="pics-text">some text</h2>
<div class="pic-item">
<img src="./imgs/123-vertical/1.jpg" />
</div>
<div class="pic-item">
<img src="./imgs/123-vertical/2.jpg" />
</div>
<div class="pic-item">
<img src="./imgs/123-vertical/3.jpg" />
</div>
</div>
<div id="pics">
<h2 class="pics-text">some text</h2>
<div class="pic-item">
<img src="./imgs/123-vertical/1.jpg" />
</div>
<div class="pic-item">
<img src="./imgs/123-vertical/2.jpg" />
</div>
<div class="pic-item">
<img src="./imgs/123-vertical/3.jpg" />
</div>
</div>
So you want one image and a text below it or image and text beside?
If you want to some image and then some text then put all your Items in a div and make your container div flex with direction: column.
.first{
display: flex;
flex-direction:row;
}
img{
width: 50%
}
and the HTML would be
<h1>Some Text</h1>
<div class="first">
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>
<h1>Some Text</h1>
<div class="first">
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
<img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>
-You need to put all your Items in a div and make your container div flex with column direction.
- IDs must be unic, so You are not allowed to use one id for multiple elements in your HTML Code.
body{
background-color:red;
}
.container{
display:flex;
flex-direction:column;
}
#first, #second{
margin-top: 10px;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.pics-text{
font-family: 'Roboto', sans-serif;
display:flex;
font-size: 36px;
color: #ffffff;
opacity: 87%;
}
.pic-item {
float: left;
position: relative;
width: 20%;
padding-top: 5px;
padding-right: 7px;
}
.pic-item a img {
width: 100%;
border-radius: 5px;
}
<div class="container">
<div id="first">
<h2 class="pics-text">some text</h2>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
</div>
<div id="second">
<h2 class="pics-text">some text</h2>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
<div class="pic-item">
<img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" />
</div>
</div>
</div>
I am creating a gallery with a number of images but the images are viewed in different size and they don't look attractive. I tried to change the height to 100px but all the images are overlapped. I want different sized images to be viewed as same size and also maintain its responsiveness.How can I make them responsive and of same size?
/*
var importantStuff = window.open('', '_blank');
importantStuff.document.write('Loading preview...');
importantStuff.location.href = 'index.html';
*/
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
.main {
max-width: 1000px;
margin: auto;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
* {
box-sizing: border-box;
}
.responsive {
float: left;
width: 50%;
padding: 5px;
}
#media screen and (max-width: 600px) {
.responsive {
width: 100%;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<div class="main">
<h1>Image Compression</h1>
<hr>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="1.png">
<img src="1.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:1</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="2.png">
<img src="2.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:2</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="3.png">
<img src="3.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:3</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="4.png">
<img src="4.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:4</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="5.png">
<img src="5.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:5</h3>
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="6.png">
<img src="6.png" width="600" height="400">
</a>
<div class="desc">
<h3>Image:6</h3>
</div>
</div>
</div>
</div>
One suggestion would be to limit the img size with the a-tag around it. Check my changes for the a- and img-tag in my example:
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
.main {
max-width: 1000px;
margin: auto;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery a {
display: block;
width: 100%;
overflow: hidden;
height: 100px;
}
div.gallery img {
min-width: 100%;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
* {
box-sizing: border-box;
}
.responsive {
float: left;
width: 50%;
padding: 5px;
}
#media screen and (max-width: 600px) {
.responsive {
width: 100%;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<div class="main">
<h1>Image Compression</h1>
<hr>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="1.png">
<img src="https://placehold.it/200x150">
</a>
<div class="desc"><h3>Image:1</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="2.png">
<img src="https://placehold.it/200x100">
</a>
<div class="desc"><h3>Image:2</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="3.png">
<img src="https://placehold.it/150x200">
</a>
<div class="desc"><h3>Image:3</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="4.png">
<img src="https://placehold.it/200x300">
</a>
<div class="desc"><h3>Image:4</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="5.png">
<img src="https://placehold.it/150x150">
</a>
<div class="desc"><h3>Image:5</h3></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="6.png">
<img src="https://placehold.it/200x200">
</a>
<div class="desc"><h3>Image:6</h3></div>
</div>
</div>
</div>
Problem with this solution is, that images are cut of, if the dimensions don't fit.
I am currently working on a project which is a mobile-first e-commerce responsive website. I am trying to create a sliding div of products detailing the top selling range.
The idea is to allow the user to click on either the left or right slide-arrows and the products range will slide accordingly - a feature Im sure you have probalby seen on on most e-commerce websites.
Right now I am on the design aspect of creating this section but for some reason I can not center the images which appear in the divs. Am i disributing the percentages correctly? I plan on showing one product image in the mobile version but 3 in the desktop version.
My code is shown below.
HTML:
/* TOP SELLING RANGE SECTION */
.mobile-topselling-slideshow {
display: flex;
align-items: center;
}
.top-selling-arrows {
width: 10%;
text-align: center;
color: green;
font-size: 2em;
}
#top-selling-slider {
position: relative;
width: 80%;
overflow: hidden;
}
#top-selling-productdetails {
z-index: 60000;
display: flex;
width: 600%;
}
.topseller-sliding-divs {
width: 13.3%
}
.topseller-sliding-divs img {
width: 100%;
display: inline-block;
margin: auto;
}
<div class="content-container">
<section class="special-offers">
<h1>THIS WEEK'S TOP SELLERS</h1>
<div class="mobile-topselling-slideshow">
<div id="left-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-left"></i>
</div>
<div class="topselling-products">
<div id="top-selling-slider">
<div id="top-selling-productdetails">
<div id="item1topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item2topseller" class="topseller-sliding-divs">
<img src="images/sports/1.jpg" />
</div>
<div id="item3topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item4topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item5topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item6topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
</div>
</div>
</div>
<div id="right-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-right"></i>
</div>
</div>
</section>
</div>
An image of the outcome is also shown below
Just try, replace these two classes with your code and check:
.topseller-sliding-divs {
width: 13.3%;
text-align: center;
}
.topseller-sliding-divs img {
margin: 0 auto;
max-width: 100%;
}
When you use display: flex; then for aligning its content to center, you have to use justify-content:center; not text-align: center;
Try this.
.special-offers h1{
text-align: center;
}
.mobile-topselling-slideshow {
display: flex;
justify-content: center;
}
.top-selling-arrows {
width: 10%;
text-align: center;
color: green;
font-size: 2em;
}
#top-selling-slider {
position: relative;
width: 80%;
overflow: hidden;
}
#top-selling-productdetails {
z-index: 60000;
display: flex;
width: 600%;
}
.topseller-sliding-divs {
width: 13.3%;
text-align:center;
}
.topseller-sliding-divs img {
margin: 0 auto;
max-width: 100%;
}
<div class="content-container">
<section class="special-offers">
<h1>THIS WEEK'S TOP SELLERS</h1>
<div class="mobile-topselling-slideshow">
<div id="left-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-left"></i>
</div>
<div class="topselling-products">
<div id="top-selling-slider">
<div id="top-selling-productdetails">
<div id="item1topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item2topseller" class="topseller-sliding-divs">
<img src="images/sports/1.jpg" />
</div>
<div id="item3topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item4topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item5topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item6topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
</div>
</div>
</div>
<div id="right-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-right"></i>
</div>
</div>
</section>
</div>