How can I put these images next to each other? [duplicate]
0
This question already has an answer here:
put n-divs next to each others on large screens and one below each others on small screens
3 answers
I'm building a portfolio for websites I've built(for a school project) and I want my images to be vertical on screens smaller than 1100px but make them go next to each other on screens bigger than 1100px. Here's my code
#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>html css
edited Jan 19 at 6:37
mplungjan
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 19 at 6:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
put n-divs next to each others on large screens and one below each others on small screens
3 answers
I'm building a portfolio for websites I've built(for a school project) and I want my images to be vertical on screens smaller than 1100px but make them go next to each other on screens bigger than 1100px. Here's my code
#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>html css
edited Jan 19 at 6:37
mplungjan
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 19 at 6:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Minimum effort please
– mplungjan
Jan 19 at 6:44
add a comment |
0
0
0
This question already has an answer here:
put n-divs next to each others on large screens and one below each others on small screens
3 answers
I'm building a portfolio for websites I've built(for a school project) and I want my images to be vertical on screens smaller than 1100px but make them go next to each other on screens bigger than 1100px. Here's my code
#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>html css
edited Jan 19 at 6:37
mplungjan
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
This question already has an answer here:
put n-divs next to each others on large screens and one below each others on small screens
3 answers
I'm building a portfolio for websites I've built(for a school project) and I want my images to be vertical on screens smaller than 1100px but make them go next to each other on screens bigger than 1100px. Here's my code
#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>This question already has an answer here:
put n-divs next to each others on large screens and one below each others on small screens
3 answers
#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>#projects {
background-color: #7A0000;
border-bottom: 3px solid black;
padding: 15px;
}
.project-img {
width: 325px;
border: 3px solid black;
margin: 15px auto;
display: block;
transition: 0.3s;
background-color: #333;
}
.project-img:hover {
transform: scale(1.03, 1.03);
transition: 0.3s;
}
@media screen and (min-width: 1100px) {}<section id="projects">
<h2 class="subheading">PROJECTS</h2>
<div id="project-container">
<a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
<div id="project-container">
<a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
</div>
</section>html css
html css
edited Jan 19 at 6:37
mplungjan
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
edited Jan 19 at 6:37
mplungjan
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
edited Jan 19 at 6:37
mplungjan
87.8k21124181
edited Jan 19 at 6:37
mplungjan
87.8k21124181
edited Jan 19 at 6:37
mplungjan
87.8k21124181
87.8k21124181
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
asked Jan 19 at 6:27
TerryJ26TerryJ26
133
133
marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 19 at 6:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 19 at 6:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Minimum effort please
– mplungjan
Jan 19 at 6:44
add a comment |
Minimum effort please
– mplungjan
Jan 19 at 6:44
Minimum effort please
– mplungjan
Jan 19 at 6:44
Minimum effort please
– mplungjan
Jan 19 at 6:44
add a comment |
1 Answer
1
active
oldest
votes
0
Try Adding this in your css file
@media screen and (max-width: 1100px) {
.project-img {
display: block;
}
}
@media screen and (min-width: 1100px) {
.project-img {
width: 1100px;
display: inline;
}
}
edited Jan 19 at 6:36
mplungjan
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try Adding this in your css file
@media screen and (max-width: 1100px) {
.project-img {
display: block;
}
}
@media screen and (min-width: 1100px) {
.project-img {
width: 1100px;
display: inline;
}
}
edited Jan 19 at 6:36
mplungjan
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
add a comment |
0
Try Adding this in your css file
@media screen and (max-width: 1100px) {
.project-img {
display: block;
}
}
@media screen and (min-width: 1100px) {
.project-img {
width: 1100px;
display: inline;
}
}
edited Jan 19 at 6:36
mplungjan
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
add a comment |
0
0
0
Try Adding this in your css file
@media screen and (max-width: 1100px) {
.project-img {
display: block;
}
}
@media screen and (min-width: 1100px) {
.project-img {
width: 1100px;
display: inline;
}
}
edited Jan 19 at 6:36
mplungjan
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
Try Adding this in your css file
@media screen and (max-width: 1100px) {
.project-img {
display: block;
}
}
@media screen and (min-width: 1100px) {
.project-img {
width: 1100px;
display: inline;
}
}
edited Jan 19 at 6:36
mplungjan
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
edited Jan 19 at 6:36
mplungjan
87.8k21124181
edited Jan 19 at 6:36
mplungjan
87.8k21124181
edited Jan 19 at 6:36
mplungjan
87.8k21124181
87.8k21124181
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
answered Jan 19 at 6:35
Anil RanaAnil Rana
44
44
add a comment |
add a comment |
Minimum effort please
– mplungjan
Jan 19 at 6:44