Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1

Appreciate any help!

CSS:

 /* ------------LAYOUT------------- */
body{
letter-spacing:.25px;
overflow-y:hidden;
font-family:Arial, Helvetica, sans-serif;
line-height:17px;
font-size:12px;
height: 100vh;}

html{
height: 100vh;}

.textwrap{
position: relative;
width:300px;
left:50px;
color:#000;
float:left;
margin-right:190px;
top: 30vh;
height:100vh;}

.textwrap a{
text-decoration:none;
color:#999;}

.textwrap a:hover{
text-decoration:none;
color:#000;}

.textwrap .contact{
position:relative;
top:40%;}

/* ------------MENU------------- */

#menu1{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width:98%;
left:500px;}

#menu2{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width:98%;
left:600px;}

#menu3{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
right:2px;}

#menublock{
top:-10px;
z-index:10;
position:fixed;
height:100px;
background-color:#fff;
width:100%;
left:0px;}

#menu1 a,#menu2 a{
text-decoration:none;
color:#999;}

#menu1 a:hover,#menu2 a:hover{
text-decoration:none;
color:#000;
-webkit-transition: all 0.2s ease;}

#menu3 img{
height:20px;
margin-left:-3px;}

#menu3 a{
opacity:.2;
-webkit-transition: all 0.2s ease;}

#menu3 a:hover{
opacity:1;}

#arrowmenu{
position:fixed;
top:30vh;
left:2px;}

#arrowmenu img{
height:20px;
margin-bottom:-3px;}

#arrowmenu a{
opacity:.2;
-webkit-transition: all 0.2s ease;}

#arrowmenu a:hover{
opacity:1;}

/* ------------WORK------------- */

.gallery{
position:relative;
display:inline;
float:left;}

#galleryblock{
position: relative;
top: 30vh;
height:100%;}

/* ------------SECTIONS------------- */

section {
height: 100vh;}

HTML:

<section id="top">
<div class="textwrap">
INFO PAGE HERE
</div>
</section>

<section id="project1">
<div class="textwrap">
PROJECT 1 HERE
</div>
</section>

<section id="project2">
<div class="textwrap">
PROJECT 2 HERE
</div>
</section>

<div id="menu1">
<a href="#project1">+Work</a><br>
</div>

<div id="menu2">
<a href="#top">+Info</a><br>
</div>

<div id="menu3">
<a href="https://www.behance.net/KarenRubkiewicz" target="_blank"><img src="images/behance.png"></a>
<a href="https://www.linkedin.com/pub/karen-rubkiewicz/87/926/879" target="_blank"><img src="images/linkedin.png"></a>
</div>

<div id="menublock"></div>

<div id="arrowmenu">
<a href="#project1"><img src="images/up.png"></a><br>
<a href="#project2"><img src="images/down.png"></a><br>
</div>

Answer №1

It seems like the issue lies in your use of "pixels" for the css property left. It would be advisable to set all left and right rules in percentages instead. For instance, if you specify left: 600px for #menu2 across all window sizes, the browser will maintain a fixed value of 600px for "left", regardless of window resizing. Transitioning to using percentages rather than pixels might help resolve this problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason the child component is not being displayed?

The code within the APP.js component looks like this: import React from "react"; import Exam from "./exam.js"; export default function App() { return ( <Exam> <h1>hashemi</h1> </Exam> ); } Similarly, the ...

Is it acceptable to nest an HTML document within the <body> tag of another HTML document?

Is it acceptable to nest an HTML document within the body tag of another HTML document? I am considering this approach in order to execute a JavaScript function on body load. Due to the dynamic generation of the main HTML code by a controller (Yii), I ...

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

My goal is to enable users to scroll in the web view similar to how they can drag to scroll on mobile devices Check out my sandbox here for reference I have created a sample sandbox with the following code: <!DOCTYPE html> <html lang="en&qu ...

Guide on modifying HTML attribute with TFHpple in the Swift programming language

I have received an HTML string and I want to modify the elements inside them, specifically the img tags, so that they have a style of width = 100% and height set to auto. This way, when I embed these images into a web view, they can easily adjust to fit th ...

Unable to render data in HTML page using Vue component

home.html: <body> <div id="app"> {{ message }} </div> <div id="counter"> {{ counter }} </div> <script type="text/javascript" src="https://cdn.js ...

Returning draggable elements to their original placement

I'm looking to create a custom function that resets my draggable elements to their original positions when invoked. This is not related to the built-in revert functionality. $('.drag').draggable({ stack: ".drag", snap: ".dro ...

Text will not be moved to a new line

Hello, I am encountering an issue with my messaging system where the messages retrieved from the database are not properly going to a new line in the window. Despite adjusting the width, the messages continue to overlap. Below is the code snippet: This co ...

What could be the reason that the Mui button styles are not being applied even after setting it to 'contained'?

Upon updating to the most recent version of MUI, I've noticed a problem with MUI buttons when using the contained variant. <div className="flex"> <Button variant="contained" color="primary" fullWidt ...

What is the reason behind needing to set both top/bottom and left/right to 0 so that my body::before can effectively cover the entire page?

I am currently diving into the world of front-end web development and I am having some trouble grasping the concept behind the behavior of body::before. Below is a snippet of my CSS code: body::before { content: ""; position: fixed; width: ...

Firefox is not allowing the form to be submitted at this time

My form is functioning correctly on Chrome and Safari, but not on Firefox. Solution Attempt #1 <form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST"> <input type="text&q ...

Optimal method for passing a variable to external PHP code

I have encountered difficulties in getting my code to work, and I am seeking guidance on the correct approach to take. The issue lies within a page that contains a dynamically generated select box populated with names from a MySQL database. The select box ...

Accessing the Bootstrap tab form from an external source

I currently have Bootstrap tabs on a page and they are functioning correctly. However, I am looking to open these tabs from an external page. Is this feasible? <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> ...

Gaining a comprehensive understanding of media queries

Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...

When an HTML table utilizes both rowspan and colspan attributes, it may encounter issues with being overlapped by the

I'm working on a straightforward table that showcases the properties of a data element. Each row will represent an element from the AJAX response in a list format. The table is designed with "rowspan" and "colspan" to expand specific cells. However, ...

The .keypress() function isn't behaving as expected

I've encountered a coding dilemma. Below is the code in question: $(document).ready(function () { var selectedDay = '#selected_day'; $(function () { $("#date").datepicker({ dateFormat: "DD, d M yy", a ...

Activating automatic HTML5 video playback for mobile browsers

Some believe that html5 videos cannot autoplay on mobile browsers. Surprisingly, I came across a website that was able to autoplay a video (without looping) on mobile: What is the secret behind this functionality? ...

The MediaSource API is not supported on Chrome 27

My current browser version is Chrome 27, and based on this source, it is indicated that the MediaSource API comes pre-installed. However, upon further examination on the same page, the test section states that Your browser does not support the MediaSource ...

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to tr ...

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...