Hey everyone,
Everything on my portfolio website (PW) is responsive except the welcome-section. When the PW is at full screen and I start to resize it, the navbar immediately moves inwards, as well as the ‘Scroll’ text. Is there a way to keep these things in a static position like the other content in the welcome-section? I have tried using position static but it doesn’t work like I expected it to.
Any insights would be greatly appreciated! Thanks
You can greatly simplify your css to get the effect you’re looking for. (note this CSS is only changes, so if you don’t see it /*commented out*/ here don’t remove it in your file)
You generally don’t want to use margin when you’re using absolute positioning as it causes strange things to happen and just confuses things.
Also I’m not sure unset means what you think it does. You probably just want 0
Generally, I like to go desktop first when designing, and mobile first when developing. When you start with mobile styles, you can just use min-width media queries. Just a personal preference. That would eliminate all the redundant CSS you have at each breakpoint and allow the desktop to ‘inherit’ from mobile.
/* styles.css */
.scroll {
/* bottom: 0; */
/* transform: translateX(-50%); */
/* left: 1px; */
/* margin-left: 180px; */
/* margin-bottom: 30px; */
bottom: 5%;
left: 15%;
}
@media (min-width: 992px) and (max-width: 1199px) {
.scroll {
/* left: 50%; */
/* margin-left: unset; */
/* margin-bottom: unset; */
}
}
@media (min-width: 768px) and (max-width: 991px) {
.scroll {
/* left: 50%; */
/* margin-left: unset; */
/* margin-bottom: unset; */
}
}
@media (min-width: 321px) and (max-width: 575px) {
.scroll {
/* left: 50%; */
/* margin-left: unset; */
/* margin-bottom: unset; */
}
}
@media (min-width: 576px) and (max-width: 767px) {
.scroll {
/* left: 50%; */
/* margin-left: unset; */
/* margin-bottom: unset; */
}
}
Just tried this and it didn’t work. The scroll still moves inwards when I shrink the screen horizontally. And I used unset to center the scroll at more narrow views.
It was working in my browser (at least, insofar as I understood your requirement).
Can you paste all the CSS rules you’re using for the .scroll element?
If you look at the website and hit inspect you can see all the css and html for everything. Then you can make changes and see how those changes effect things. I use Firefox and it organizes everything very nicely.
You can also click on the github icon at the bottom of the website to see all the html, css, and javascript
It would take long time even for skilled developer to find out whats wrong and give you solution to match your needs.
Id rather give you some general tips on what i see wrong at first glance.
First thing, which is too general, is dont use rules simply because they make your content look the way you wish it, without understanding how they operate. I know, we all started there, experimenting with rules, in the hit and miss pattern, until something works out, but the more you add stuff by this approach, the more cluttered your css becomes, the more places where errors can occur and higher chance things to back-fire at you later. You should really aim to understand how something operates, before you apply it. PS: static is the default positioning, there is very low chance using it would achieve anything
Second thing id pick at is know html elements purpose. If you dont know the use case of a particular element, simpy use div. If you know there is an element to match your particular use-case, use it. The first thing i noticed when i opened the css of your page is everything is wrapped in sections. The section element has its semantic meaning. You use it to wrap your navigation. The site navigation is not a section. Instead you can use the nav element, if you really wish a proper tag. Or use div if you cant figure out the appropriate one ^^.
There also seem to be a mess with your selectors. I see your sections have both an id and a class, which seem to have identical name/use. You want id to style a particular element in your page(when you cant target it by other means). The class on the other hand is used to share styles between multiple elements. For example, you can use the id of each section, to style them individually and then also apply a class to style all top level sections(or simply target section if you dont use it on lower levels).
Now to return to my first point, ill give only few examples with the first elements i picked. Your .top-nav class has position relative and z-index: 999. Do you know the prupose of these rules and why are they there? Targeting the ul element with class “nav-items”, there is margin-left: auto. This rule has very particular effect. Going further down the line, there is another ul which also has z-index rule and is absoultely positioning and hidden and i cant see the point there.
There is also the media queries which very often can cause unexpected behavior combined with rules you do not fully understand the behavior.
I cant give solution to yuour answer, but what I offer you is these few points, which in my opinion are the right path learning in this sphere.
The point for that one is to hide the overflow because it is the hamburger menu items that pop up when clicked.
Great point, I overlooked that, just changed it to div
I have commented that position: relative out because it serves no purpose, I just haven’t pushed the changes to my github yet. And I used a high z-index so the navbar can be on top of everything.
I am still in the process of cleaning up my html and making sure I don’t have unnecessary things like an id and class with the same name. Thanks for the code review tho, just cleaned up my html, looking much better now
Not sure if I have understood the issues you are talking about.
For the nav, remove this margin.
@media (min-width: 992px) and (max-width: 1199px)
.oval-list-item {
margin-left: -300px;
}
For the scroll, I’m not sure what you mean by “immediately” but you have this media query that is centering it when it is. If you want it to happen at lower screen widths adjust the values accordingly.
@media (min-width: 992px) and (max-width: 1199px)
.scroll {
left: 50%;
margin-left: unset;
margin-bottom: unset;
}
I copied and pasted it from the browser style tab which is why the code looks like it does (for the media queries code).
If you want two sections to behave the same that usually means you want a common container for the sections. At least when it comes to having the same spacing and reacting to size changes.
So I would have to do something like this to solve my problem? :
<div class="container">
<div class="top-nav">
<!-- My navbar content -->
</div>
<section class="welcome-section">
<div class="image-container">
<!-- My image content -->
</div>
<div class="text-wrapper">
<!-- My greeting section content -->
</div>
<div class="scroll">
<!-- My scroll content -->
</div>
</section>
</div>
Yes, something like that.
Then inside the .container { } I would include stuff like flex, padding, and margin, in order to get the same look I am going for, then everything in the welcome-section should respond the same to resizing the screen?
Maybe not flex, unless you really need it and remember to set it to a column direction. I would keep flex out of general containers and only include things such as max-width, centering, and padding.
Thank you for your suggestions, I have tried including max-width, centering, and padding, but nothing is stopping the navbar and scroll from moving too early. I also tried out min-width: 1440px; and that made everything on the left of the welcome-section move together. Instead of just the navbar and scroll moving early, that change made the greeting move early with them. Still not my desired result, but the closest I have gotten. I am inspecting other websites with indented navbars and can’t figure out how they stopped the navbar from moving immediately when resizing the screen. If you have any further insights or alternative suggestions, I would greatly appreciate your assistance.
I don’t know what you have tried.
Anyway, I doubt you need the container around both, and if you do that you will have to make other changes as well. Also, when the outermost element is the one with the background color on it, you have to put the container inside it and not around it. So as said, multiple changes would be needed if both share the same container.
<header class="top-nav">
<div class="nav-container">
<div class="logo">
<a href="#welcome-section"
><i class="fa-solid fa-ice-cream"></i>
ksdev
</a>
</div>
<ul class="nav-items">
<li><a href="#welcome-section">Home</a></li>
<li><a href="#about-section">About</a></li>
<li><a href="#skills-section">Skills</a></li>
<li><a href="#projects-section">Projects</a></li>
<li class="oval-list-item">
<a class="oval" id="center" href="#contact-section">Contact</a>
</li>
</ul>
<input id="menu-toggle" type="checkbox" />
<label class="menu-button-container" for="menu-toggle">
<div class="menu-button"></div>
</label>
<ul class="menu">
<li><a href="#welcome-section">Home</a></li>
<li><a href="#about-section">About</a></li>
<li><a href="#skills-section">Skills</a></li>
<li><a href="#projects-section">Projects</a></li>
<li>
<a class="hidden-oval" id="hidden-center" href="#contact-section"
>Contact</a
>
</li>
</ul>
</div>
</header>
.top-nav {
background-color: #1c232e;
color: #f9f9f9;
height: 80px;
}
.nav-container {
display: flex;
align-items: center;
height: 100%;
width: min(1100px, 95%);
margin: auto;
}
You have styles in your media queries that are causing an overflow and the padding on top-nav should not be needed.
@media (min-width: 992px) and (max-width: 1199px) {
.top-nav {
/* padding: 20px 0 0 0; */
}
.oval-list-item {
/* margin-left: -300px; */
}
}
As you have set the same styles in multiple media queries you now need to fix them all. Do not redeclare the same styles, only add styles that change inside media queries. Otherwise, you are just repeating styles that were already applied. Which is not only unnecessary but makes changing the code cumbersome for no reason.
By the way, the “to top” button at the bottom needs a welcome-section id to link to.
I mean I can’t see your code on your local PC obviously. I’m talking about the code I can see on the repo. In that code, you are repeating multiple styles.
Sorry about that, my approach to media queries is to copy and paste everything outside of the media query, and check to see what needs to be changed and what doesn’t. I usually will delete or comment out things that don’t need to be changed. I didn’t get to those breakpoints yet so it looks like I just have the same css over and over. I apologize for the confusion and didn’t mean to frustrate you in any way. I appreciate how helpful you have been, I really do
It’s fine, I’m just letting you know about it. We are cool, no worries.
Anyway, the reason you give for how you are doing this is in my personal opinion inadvisable. It just makes a mess out of everything. Do not add something because you might need it, add it when you need it. CSS is hard enough to keep track of as is. The less of it you can write and need the better.
I agree, I will be taking this approach from now on. Thanks : )
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.