I am trying to move the whole text in front of each image, in a complete block, to a position under the image with a media query @720px but nothing works with either display-block and various attempts with other properties. e.g. vertical-align.
You need to either clear: left the #main .text or display: inline-block it, if I understand correctly what you are trying to achieve.
Hi PVgr
That’s it. The
#main .text{
display:inline-block;
}
did the trick, but now left me with other problems, starting with centering the image
text-align:center; is not doing it.
.row img{
display:block;
text-align:center;
width:80%;
height:auto;
margin:0 auto 10px;
padding:50px 20px 0 10px;
}
I can use padding-left but it works nly at certain widths.
Well, your img in .row inherit a float:left that needs to be overwritten. padding is not useful on img and text-align:center is irrelevant. Also, there is a div.img-container around your images, with width:50% that should be 100%. The centering of the image will then occur with the auto margin. A max-width:100% is probably needed too.
Wow!
It is working with this now:
@media screen and (max-width:720px) {
#wrapper{
max-width:720px;
}
#main h2, h4, p{
display:block;
margin-left:20px;
}
.row img{
float:none;
height:auto;
margin:0 auto;
padding:50px 20px 0 20px;
}
#main .text{
display:inline-block;
}
}
My remaining problem is the size of the image when the screen width gets down to about 350px
The img-container code works well in other pages but not in this one. How can I get the image to shrink along with the diminishing screen width?
Many thanks
I had another go at this starting with your updated code, but still along the lines of what I did before. The main difference is that instead of floating the image to the left, I used display table to put the image and text side by side on the wide screen. As before, I group the image and text together in a section. The first query reverts the table to blocks. The second one reverts the main/side cells to blocks.
This is just the #main part, it’s the only bit I edited:-
<div id="main">
<section>
<div class="img-container">
<img src="https://placehold.it/375x210" alt="" width="375" height="210">
</div>
<div class="main text">
<h2>How to get the lowest <br> hotel rates anywhere</h2>
<h4>Jorge Bravo 7/03/2014 36 Comments</h4>
<p>
Despite the abundance of travel sites offering the best and cheapest prices,
the fact remains that most major hotel chains guarantee the lowest Internet
rates, if they are booked in their websites. </p>
</div><!-- close main text -->
</section>
<section>
<div class="img-container">
<img src="https://placehold.it/375x210" alt="" width="375" height="210">
</div>
<div class="main text">
<h2>Do not disturb my bags</h2>
<h4>Camilo Barros 7/03/2014 36 Comments</h4>
<p>
The first thing many travellers do on arrival at a hotel is to unpack and place their carefully chosen clothes and accessories in the various cupboards and drawers available in the hotel room. Hopefully, they will still be there when it is time to leave.</p>
</div><!-- close main text -->
</section>
</div><!-- close Main -->
This is your css with some modifications:-
body, html {
margin:0;
padding:0;
}
#header{
width:100%;
height:250px;
background-color:brown;
}
#title h1 {
float: none;
text-align:center;
font-size: 40px;
font-family: 'Times New Roman', Times, Baskerville, Georgia, serif;
line-height: 30px;
font-weight: bold;
color: #E1E19D;
padding:100px 150px 0 0;
}
#clock {
float:left;
width: 170px;
height:140px;
background-color:#A52A2A;
padding-top:65px;
margin-left:60px;
}
#clock #position{
float:left;
text-align:center;
margin-top:5px;
margin-left:20px;
color:white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.cityTimeDate span {
display:block;
}
#city {
font-size:16px;
color:white;
}
#time {
font-size:36px;
color:#CDCD5C;
}
#nav{
width:100%;
background-color:#CD853F;
text-align:center;
padding:60px 0;
}
#nav ul {
margin-top:-10px;
list-style:none;
padding-bottom:25px;
}
#nav li {
display:inline;
padding:0 30px;
}
#nav li a{
text-decoration:none;
color:white;
}
#wrapper{
display: table;
}
#main{
display: table-cell;
width:70%;
background-color:white;
padding: 1em;
}
#main section {
display: table;
max-width: 700px;
float: right;
margin-bottom: 2em;
}
#main section div{
display: table-cell;
vertical-align: top;
}
.img-container{
margin:0 auto;
border:none;
padding-top:0;
margin-top: 25px;
max-width: 375px;
width: 50%;
}
.img-container img{
width:100%;
height:auto;
padding-top: 1.6em;
}
#main .text{
display:inline-block;
font-weight:400;
padding-left:40px;
}
#main .text p{
max-width:500px;
}
#main .text h2{
font-family: 'Roboto Slab', serif;
font-weight:400;
font-size:25px;
}
.clear{
clear:both;
}
#side{
display: table-cell;
width:30%;
vertical-align: top;
height:auto;
background-color:#F1F1F1;
}
#inside{
width:80%;
background-color:white;
margin:0 auto;
}
#inside p{
padding:20px;
}
#footer {
clear:both;
text-align:center;
background:#cc9;
}
#footer ul {
list-style:none;
}
#footer li {
display:inline;
}
#footer li a{
text-decoration:none;
}
@media screen and (max-width: 950px) {
#main section {
display: block;
width: auto;
float: none;
margin: 0 auto;
}
#main section div {
display: block;
margin: 0;
padding: 0;
}
.img-container,
#main .text {
display: block;
width: 95%;
padding: 0;
}
}
@media screen and (max-width: 700px) {
#wrapper,
#main,
#side {
display: block;
width: auto;
vertical-align: baseline;
}
}
Hi Sam
Thank you very much.
I placed you code here http://pintotours.net/TEMP/BLOG/sam.html … but I think I messed it up…
You may not have noticed that I progressed from there and that I solved the original problem. Now I am only stuck on how to make the image responsive below 350px
My page is still here: http://pintotours.net/TEMP/BLOG/Mine.html
Thanks
I started from the code that was linked at the start of this thread. It may not have subsequent changes you made since then. If you are mixing two solutions, it may not work.
That was my earlier attempt where the images were floated.
This is the whole code from my previous post in Codepen, so you can see instantly how it works. The images here are fully responsive. There are other issues on parts I have not worked on, but that’s another subject.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.