Hi guys Im having some difficulties with creating a responsive web page. This thread is a little related to my previous thread → Responsive site? - #6 by SamA74
I have three colums which are created as such:
<div class="col">
<div class="col-logo-wrapper">
<div class="glyphicon-ring">
<span class="glyphicon glyphicon-blackboard"></span>
</div>
</div>
<div class="col-header">
<h3>Lorem Ipsum</h3>
<h4> Secon header test here.</h4>
</div>
<p>
Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit,
dignissim argumentum eam at. No partiendo vulputate suscipiantur pro. Id quot nemore adipiscing vel.
<a href="https://www.smashingmagazine.com/events/san-francisco-2018/">Read More</a>
</p>
</div>
<div class="col">
<div class="col-logo-wrapper">
<div class="glyphicon-ring">
<span class="glyphicon glyphicon-blackboard"></span>
</div>
</div>
<div class="col-header">
<h3>Lorem Ipsum</h3>
<h4> Secon header test here.</h4>
</div>
<p>
Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit,
dignissim argumentum eam at. No partiendo vulputate suscipiantur pro. Id quot nemore adipiscing vel.
<a href="https://www.smashingmagazine.com/events/san-francisco-2018/">Read More</a>
</p>
</div>
Also don’t move things around with relative positioning unless you want them to overlap something else. Relative positioning doesn’t change the flow at all and the element always occupies the same space that it did before even though it looks as though it has been moved. User margins/padding to push things away from other elements while maintaining the flow of the document.
Why do you need the overflow:hidden? That will only hide stuff that sticks out and you don’t want that to happen in a responsive site anyway and you don’t need to contain floats at that point either (as you are using flex).
Hi thanks for your reply and good explanation its much appreciated
Looks like I have a lot of small mistakes here and there. I’m really a beginner with this but as I work with this everyday I will hopefully grow stronger with this .
I did paste your suggested edit but now it looks really awkward at 175% zoom level (1920/1080 monitor) - the cols gets
pushed all the way to the left but its a little margin at the right side meaning they are not centered…
I tried to use it but I got all the same result as I already had so I discarded it .
But do you think that would that be an better option then using flex ?
“Why do you need the overflow:hidden? That will only hide stuff that sticks out and you don’t want that to happen in a responsive site anyway and you don’t need to contain floats at that point either (as you are using flex).”
this might be left over code from previous failed attempts.
Remove the width:100% from main as its not really needed and is stopping it from centering when zoomed. This should fix most of the issues with zooming.
Why are you obsessing about large zoom levels so much anyway? Most people only zoom a little or just zoom the text. You can’t really cater for infinite zoom and indeed if zoom is your prime goal then your media queries and element sizes should be using ems and not px.
No use flex but manage it correctly.
Avoid fixed heights and widths for any fluid content. Max-width is fine and allows the page to scale as required. Almost never use a fixed height on a container that will hold text or content that may grow.
[quote=“PaulOB, post:4, topic:298116”]
Why are you obsessing about large zoom levels so much anyway?
[/quote].
I think I must have some sort of Obsessive-Compulsive Disorder it must be perfect
I just removed the width 100% and it did indeed fix the centering problem , but now the background for col-container does not stretch out all the way when im zooming., hmmmm
edit: Still does not look right…
I know an easy fix would be to just move the background to the body . But In the past It has been recommended to me to avoid easy fixes …
“Avoid fixed heights and widths for any fluid content. Max-width is fine and allows the page to scale as required. Almost never use a fixed height on a container that will hold text or content that may grow.”
If you are still having problems please fork the codepen with an updated example showing the problem so i can see what you are seeing without having to guess if you added my fixes in correctly
When using codepen only post html that would be found inside the body tag in the left pane. Don’t post all the head stuff unless you have hot linked to external code. From the settings in codepen you can add quick links to most frameworks anyway if needed.
Before you spend time debugging or trying to work out why something isn’t working the first stop is the validator which will weed out broken code. Sometimes a simple comma or typo can break a whole site so the first stop is to get valid code or at least code that you know is not broken.
as for the background comment , I know about this . But this is just for the beta testing im not sure I would settle on this background thats why I didn’t include a cross platform code
Hi again I was hoping you had chance to take another look.
I did a little more testing just now . I know you said the zoom is not the same as seeing it at a different monitor so I wonder if that is the problem or not? .
When I zoom in the columns hits the left side at some point but leaves a little margin on the right side . So they are not perfectly centered at 175% zoom with my monitor. The pen is updated:
I’m not going to give you the answer this time but make you work for it
The layout is exactly centred.
If you add a background to .col-container you will see that the layout is exactly centred. The margin-right of 20px that you added to .col is the gap you see when the page is squashed. Your 3 boxes are never actually perfectly centred because you have a margin-right taking up layout space.
If you added a margin left and right to only the middle item then the boxes would be perfectly centred and you would get no gap to the side. Of course this assumes you are not going to allow the boxes to wrap and that you remove the margin on smaller media queries if needed.
Here’s a start:
.col{margin:0}
.col:nth-child(2){margin:0 20px}
For maintainable css it would be better to put a new additional class on the 2nd .col box and use that new class to add the margin rather than nth-child.
Note that you still have not corrected the 2 points I mentioned at the start.
One is here:
Main {
For best practice don’t capitalise your element selectors. You don’t have an element called Main in the page but you do have one called main. In xml that would be an error so best to be consistent.
The other error is a logic error here:
.col-container {
position: relative;
top: 20px;
That top 20px pushes .col-container outside of its container and creates a 20px overlap you cannot recover automatically. You would see it stick out the bottom if you had not given main a fixed height (which you should remove anyway as I already mentioned).
Hi buddy thanks alot for your help. after reading all your posts here I can see that you are an expert with this:slight_smile: I thought html/css was easy but I can see that I have have a lot to learn
That’s OK as your explanations are really great , this gives me a great start. I will work with this a few hours then maybe it looks better.
I Didn’t catch this yesterday. great advice with no capital on the class names, dont know why I introduced this anyway. Ill fix it.
Ok, so what would the best practise here be ? (I don’t want the columns to be to close to the top)
Margin-top: 20px; ?
Edit It worked perfectly introducing a new class: also removed the margin on smaller media screen as you
suggested.
.col2 {
margin-left: 20px;
margin-right: 20px;
}
Also I ha a few additional questions:
1. I´m unsure if I should use the full width of the screen for small devices or just use 90% of it , what do you think is best ?
2. I have made so many edits to these columns that I’m unsure what that sets the width for them ?
It depends on your content a little. When you get down to 320px width (small phone widths) then space is at a premium so I would most times go full width but ensure that text content has some padding so it doesn’t butt up to the edges which looks bad and is hard to read.
However if the layout is supposed to be a card type layout then I may leave a 5px gap around the edges as long as it doesn’t compromise the readability of the content. There never is one right answer but a ‘what fits best’ for this design and its content.
I’d use a margin-top on .col to achieve that effect or a padding-top on .col-container.
I’m not sure what you mean as you have 3 flex items across with flex:1 applied so they will all grow to fill the parent equally. The width:20% you added doesn’t really do anything as the items have been set to grow equally.
Use the Chrome dev tools (or your browser’s dev tools) to inspect the elements if you are unsure where the rules are coming from. I keep the dev tools window open at all times and look at it more than I do the actual code in my editor. It should be another of your ‘best friends’ and most developers would be lost without it. It may look daunting at first but you really only need to point and click at what you want and in Chrome you also get the ‘toggle-device-toolbar’ which is always very useful for a quick device check.
Thanks a lot.
This thread has been very informative for me. You are a great teacher I came along way with this. I guess its finished at this point. Here is the final result :
I think it looks great. and now it behaves exactly like I wanted. Some more tweaking would probably be needed but for now I’m quite happy
cheers
You still need to validate your HTML. You open a number of containers but do not close them which leaves the browser to “guess” where they should be closed. All browsers may not “guess” the same. Only HTML with properly matched tags can be reasonably assured to display consistently in all devices. This is not a trivial concept.
