I recently got back into web development after nearly a decade off, and responsive design is new to me. Could you please help with this page? When the width is inadequate for the page, the boxes are shifting to 1 per row as desires. However, when the width is inadequate for a single box, things start to get out of hand. I think I’d like to have each box shrink with the device if they are too large for the device. I may also have to have the images disappear at some point. Please assist. Thank you.
Hi,
This is just rough but you would follow this process for those boxes.
@media screen and (max-width:960px) {
.spec-box {
float: none;
height: auto;
overflow: hidden;
width: auto;
}
.spec-specs {
float: none;
height:auto;
width: auto;
overflow:hidden;
}
a.official-site, a.spec-discuss {
position:static;
margin:0 10px 10px 0;
}
}
@media screen and (max-width:450px) {
.spec-image {
background-color: #fff;
float: none;
height:auto;
margin:15px 0;
width:auto;
}
.spec-image img {
width:50%;
height:auto;
margin:auto;
display:block;
}
.spec-specs {
padding:10px
}
}
That will allow those boxes to go right down to 300px at least.
You also need to ensure that you are never getting a horizontal scrollbar as that will upset the scaling on small devices (you are getting a scrollbar at some widths so I will leave that as an exercise for you :))
Thanks for the head start. I made some edits and came up with this. I am currently having a problem in which the two buttons are appearing on top of text. Please assist. Thanks.
@media screen and (max-width: 610px) {
.spec-box {
float: none;
height: auto;
width: auto;
}
.spec-specs {
float: none;
height: auto;
width: auto;
overflow: hidden;
margin: 0 10px 10px 10px;
}
.spec-image {
float: none;
}
.spec-image img {
display: block;
}
}
The actual problem is that the text that is being overlapped is at the bottom of the parent. You set those green/gray anchors to be bottom:0;position:absolute. So it’s displaying how it should. I’m not sure why they are set to position:absolute to begin with? You can remove that altogether and style it without the position:absolute. Placing it in the end of the source order for the parent will automatically place it at the bottom.
Hm. Yes, I did that so that they would move to the bottom of the box in a full-sized browser. Is there a way to have them move to the bottom in a full browser but display inline otherwise? I tried display: inline but did not see an effect.
Umm, maybe clear: left ?
They are still position:absolute so clearing will do nothing. You could give bottom padding to the parent to make room for the buttons otherwise I’d simply remove the absolute positioning for mobile.
Which is what I did in the code that I already gave the OP. 
a.official-site, a.spec-discuss {
position:static;
margin:0 10px 10px 0;
}
I already mentioned that above and I gave you fixes for that. I suggest you try my code first and then adjust it to suit afterwards.
I also catered for scaling and centering the image on mobile also which you seem to have omitted from your code. You missed a lot of subtleties in my code that will make the box look much better over the range.
1 Like
Paul,
I appreciate your assistance, and I did not mean to undo your work. I made some changes because there were some issues I was trying to iron out. For one, I did not understand the purpose of making a break at 610 px and causing the links to span 100% width:
This also seems unnecessary on mobile:
Regarding the centering of the image, to me that seems like personal preference, although I may be fine with the centering and scaling in the end.
Thoughts on the above?
The 610 was just an arbitrary measurement as your page looked very awkward with just the one fixed column and masses of white space to the right. It looked broken from my perspective.
What you should do is allow the two boxes when side by side to compress smaller and then when they look too small or odd switch to the full width version which then caters for all devices nicely.
Just leaving everything left aligned looks broken to me and not very pleasing to the eye either. A responsive site should make best use of the space available especially on the smaller screens.
You usually need to scale the image as it will bee to large on mobile (especially on a 240px screen) and take up too much valuable screen space. Again centering the image makes it look much better on small screens rather than stuck to the side as though you have forgotten about it.
As a rule of thumb headings and single images look better centred on smaller devices but does again depend on content and design. There are no hard and fast rules but there are accepted practices.
Things like your buttons are much easier to tap when they are full width and most mobiles will have the main call to action buttons stretch all the way across or at least have a nice large tap target.
In the end its your choice but the purpose of my code was to show you that all these things can be changed easily to re-arrange and create a better layout. You don’t just change one thing without making the other elements look better or at least taken into consideration.
I think the screenshots look great compared you your original
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.