Elements changing its position whenever I’m zooming in or out. I want them to have fixed position. Here’s code https://codepen.io/Ritik-flaee/pen/BaGaONP
Are you talking about the text wrapping?
1 Like
By “zooming”, do you mean as you narrow and widen the browser? Because the text wraps, some uls become taller than others. And because they are set to align-items: center;, they will always center vertically in the container, meaning it looks like some of them drop (that is, the circles don’t line up). I’d recommend you remove the align-items: center from the section.
2 Likes
I’d probably simplify all those uls as they aren’t really lists as such and one item is never really a list anyway. As you are using grid I would linearise the html a bit and just place those right items into the grid to keep them where they need to stay. Those elements are not h4s either and should be divs or p tags.
It also looks like a header section so I would use the header tag instead (section tags really should have suitable section header at the correct level but that’s another story 
).
This is just a quick (and not very careful) mock up but I would start with something like this.
2 Likes
That pp1 and pp2 class element is changing the position whenever I’m increasing or decreasing the size of browser
Ok sharing the full code. The problem is pp1 and pp2 class items changing the position whenever I’m increasing and decreasing the size of browser
Have you seen the answers to your question above?
1 Like
yes I did
That doesn’t happen in my example but is caused in your example because you used a magic number of a 40% width on the left section which gets affected by the zoom.
Don;t use a 40% width but instead push the other items over to the right with an auto margin.
.left-section {
/* width: 40%;*/
margin-right:auto;
}
.right-section {
margin-right:1rem;
}
That will stop the 40% getting smaller and moving the right items when zoomed as the free space is used up instead.
You made the same mistake with your left and right navs and again used magic number widths to separate them rather than auto margins or other methods that don’t require a width.
However, you should not really be concentrating on zooming your page but instead opening and closing the browser window to see how elements move as the page gets smaller and larger (this is not the same as zooming but 100 times more important). Your page breaks from about 1100px and smaller and needs some love with media queries to adapt to the smaller screen sizes.
Zoom is not really a good indication of how a page looks at different resolutions and pages will always look different when zoomed but should remain readable. I tend to only zoom text (because I need glasses) and not the whole layout.
1 Like
Thanks. Would like to know how should I improve my html css and javascript
1 Like
Try to avoid magic numbers in CSS and try to avoid using fixed heights for elements that hold fluid content like text. You never know how the text will wrap or be zoomed by the user so height is out of the question and in 99% of cases not needed as the content can dictate the height. You can use min-height if you have to and that will allow the element to grow when needed or when text wraps to another line.
Here are just a few of the magic numbers I spotted in your code.
header{
width: 100%;/* not needed*/
height: 31px;/* magic number */
margin-top: -1px;/* magic number */
}
header ul{
height: 41px;/* magic number */
}
header ul li{
height: 15px;/* magic number */
margin-bottom: -11px; /* magic number */
}
.left-breadcrumb{
width: 40%;/* magic number */
}
.right-breadcrumb{
width: 40%;;/* magic number*/
margin-right: 74px;;/* magic number*/
}
.line{
margin-left: -18px;/* magic number*/
}
.left-section {
width: 40%;/* magic number*/
}
The magic numbers are bad because they refer to something that may not always be true. If something is changed n your layout then all your magic numbers will be wrong as they expected something else to be there.
You need to let content dictate the flow and use the automatic alignment of things like flex and grid to align elements without using silly negative margins and fixed heights. If you make it automatic then your content can vary and accommodate something else nicely.
Avoid using html for decoration (unless thgere is absolutely no choice.
e.g.
<li class="line"></li>
You used that element to create a line which could easily have been placed on the real content as a border. There was no need for that extra html element which has no semantic value.
Group your html more logically.
You have:
<ul class="left-section">
But then you have 3:
<ul class="right-section">
All 3 of those right sections should be contained in a single parent as they belong together and rather than saying right or left (as that has little meaning on a responsive page as they will be centred on small screens most likely) you could use a better name such as logo-group for the left section and something like info for the right section. There is nothing worse than having something called right section when at small screen you place it on the left
There are too many uls in that code and while its good to try and use lists for similar items sometimes they are just no needed. Lists for navigation items are fine and a list of things are fine but the logo isn’t a list and the opening hours and info sections aren’t really a list and are separate blocks really.
Those whole 3 top sections are really just the header section and I would group them all in a header tag and not header and section tags. (Section tags generally have a heading associated with them).
Be careful with code like this:
header ul li {...}
You have just globally styled all lists in a header and if you have more header sections (as you are allowed multiple headers) then you have just styled all those the same when you didn;t mean to. Not to mention that if you add any third party code or widgets you may inadvertently affect their styling also. It’s better to give your header a suitable class and use that instead of the global rule. It’s ok for things that are always under your control but you need to think ahead all the time.
Also you have said this:
header ul li {...}
When you could have said this:
header li {...}
Keep your selectors as short as they need to be otherwise specificity becomes an issue and sites become harder to maintain in the long run.
Most of the above is just minor tweaks that will in the long run make your life much easier and are good habits to get used to.
2 Likes
Thanks Paul I’m newbie, so don’t have that much of idea. Any tips you want me to give to improve my html knowledge 
1 Like
Your html wasn’t too bad and you just overcooked it a bit with the uls
The main thing with html is that it creates a readable document on its own. You should be able to read the source html and understand what the document is about and what it does etc.
Therefore logical headings in the right order and not jumping between levels.
Sections can be identified by header,footer,nav,main, aside etc but again try to keep it logical and use the appropriate heading to describe the section and the appropriate level (you can’t jump from an h2 to an h4 etc…).
Avoid empty elements where possible as they have no semantic value if they are just used for decoration. Generally you can use pseudo elements if you need an extra hook for styling something.
Use the image tag when the image displays actual content pertinent to the page. If the image is just decoration then it should preferably be in the background or its alt attribute set to alt=“”. In 99% of cases though you would want proper alt attribute text for the image.
The simpler you can keep your html the easier it is to manage. Avoid using two divs when one will do. (Just take a look at any wordpress site and they are almost impossible to read or work with easily.)
The most important thing though is semantics and your the tags you use should be semantically correct for the job in hand. For example many beginners use breaks instead of using the p tag (paragraph). breaks are not meant for making space they are a semantic element that creates a new line such as would be required in the lines of an address or a poem or song etc. They are not for spacing out blocks of text or content.
If you can start to think semantically about what you are creating then generally the correct tag to use is more easily identified. People always have opinions so there will be some who say do it one way and some say another but at the end of the day it’s a semantic choice on what you think fits best. It doesn’t have to be perfect but should at least have logic behind it.
2 Likes
As you said top 3 sections should be belongs to header. If I group them now it will be difficult for me now or need to code it again 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.