Develop Reference

Why won’t this section stay contained when I change my browser screen size? HTML, CSS

Why won’t this section stay contained when I change my browser screen size? I used HTML and CSS. It looks fine when I made my screen full size but then if I make my browser smaller it doesn’t show the full content. (it only shows half of the image but shows the full text) screenshot of how it looks on smaller browser](https://i.stack.imgur.com/i9qiK.jpg)
.whoweare{
padding:80px 0px 50px;
background-color: #000000;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
}
.whoweare .content .box{
padding:5px;
flex:0 0 100%;
max-width: 100%;
}
.whoweare .content .item-img {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content .item-text h2{
font-size: 50px;
font-weight: 500;
margin:20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content .item-text p{
font-size: 20px;
line-height:50px;
color:#ffffff;
margin:20px;
padding:0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
.whoweare .content .class-items .item{
margin-bottom: 30px;
display: flex;
}
.whoweare .content .class-items .item .item-text{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
` <section class="whoweare" id="whoweare">
<dic class="container">
<div class="content">
<div class="box text wow slideInRight">
<div class="class-items">
<div class="item wow bounceInUp">
<div class="item-img">
<img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" width="601"
height="751" />
</div>
<div class="item-text">
<h2>Who we are</h2>
<p>Our gym provides a unique experience </p>
</div>
</div>
</section>````

Change the height width of img tags.
Use % parameters
for example
height=50%
width=60%.
I think 🤔 you need also change the height width of other container tags
If design is not look like good

You should add to all importan containers`
.container
{
width:100%:
height: auto;
margin: auto;
}
//Also can try
.container
{
width: auto;
padding: 0;
}
that should work...

Problem
img has specific width and height, hence it overflows even though its container (in your case .item-img has width:50%;).
Answer
Give the img of width: 100%; and object-fit: contain or object-fit: cover if you want it cropped.

website page has unwanted horizontal scroll bar

I have a annoying bug with my website where when i preview my website with live server, there is a unwanted horizontal scroll bar when there is no content in the scrolled area. I am a new developer so i come across many errors which mostly i can resolve. Can someone help me with the error in my code which is causing the horizontal scroll bar.`
This is my HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
h1 {
color: pink;
padding-top: 10px;
padding-left: 10px;
font-family: sans-serif;
text-align: center;
}
p {
color: pink;
font-family: sans-serif;
padding-left: 5px;
text-align: center;
}
.titles {
border: 3px solid #fff;
padding-top: 30px;
padding-bottom: 30px;
}
header ul li {
color: pink;
list-style-type: none;
padding-left: 40px;
padding-right: 40px;
padding-top: 30px;
padding-bottom: 30px;
}
header ul {
display: flex;
position: relative;
left: 400px;
}
header a {
text-decoration: none;
color: pink;
}
<header>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</header>
<div class="titles">
<h1>HI, I'm Anas and I'm a Junior Webdeveloper.</h1>
<p>
I have recently started coding and I am looking to persue a career in software engineering and web developing.
</p>
</div>

Adjust your header ul css to leverage flexbox so you don't need the padding-left: 400px, which is causing the unwanted horizontal scroll:
header ul {
display: flex;
justify-content: flex-end;
}

This happens in HTML when the content goes beyond the width of the screen. A quick fix is too add
overflow-x:hidden
So in your style tag add
body{
overflow-x:hidden;
}
To read more on the overflow property
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Happy Coding!

Changing header style on scroll using intersectionObserver and fullpage.js

I'm a newbie of front-end development. I'm currently working on a project trying to make my header style change while scrolling using intersectionObserver. I'm also using fullpage.js to create a full page transition effect. However, I encounter the problem that when I scroll, browser considers section 1 and section2 are the same section, which the header style will only change when I scroll to the section3.
Would anyone tell me what happened? Maybe I missed something.
The code I used is here:
<div class="header">
<a href="#">
<h1>logo<h1>
</a>
<nav>
<ul class="nav-link">
<li>projects</li>
<li>about</li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section s1">
</div>
<div class="section s2">
</div>
<div class="section s3">
</div>
<div class="section s4">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #070520;
}
.header {
--text: #fff;
--background: transparent;
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 999;
padding: 1rem 6.5rem 0 1.5rem;
background-color: var(--background);
}
.header a {
font-size: 0.8rem;
text-decoration: none;
color: var(--text);
font-family: "Helvetica", sans-serif;
font-weight: 100;
letter-spacing: 0;
}
.header .nav-link {
list-style: none;
}
.header .nav-link li {
display: inline-block;
bottom: 0;
padding: 0px 10px;
}
.header-scrolled {
--text: #070520;
}
.s2 {
background-color: grey;
}
.s3 {
background-color: green;
}
.s4 {
background-color: blue;
}
new fullpage("#fullpage", {
scrollingSpeed: 1000,
});
const header = document.querySelector('.header');
const sectionOne = document.querySelector('.s1');
const sectionOneOptions = {};
const sectionOneObserver = new IntersectionObserver(function(entries,sectionOneObserver){
entries.forEach(entry=>{
if(!entry.isIntersecting){
header.classList.add('header-scrolled')
}else{
header.classList.remove('header-scrolled')
}
})
},sectionOneOptions);
sectionOneObserver.observe(sectionOne);
https://codepen.io/Austin020304/pen/WNwjqaO
Thank you!

Consider using fullPage.js state classes or callbacks for that.
Also, do not forget to check the callbacks examples:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You might also want to check this video tutorial I did making use of the state classes to create animations.

Nav Bar doesn't go across whole page

so I am doing a challenge for FreeCodeCamp and my Nav Bar is being wonky. If you notice, it doesn't go across the entire screen so there is some white space. The only way I seem to be able to alter the dimensions of the navbar is if I get rid of overflow:hidden, but then the navbar acts really weird.
https://codepen.io/mso122591/pen/boowZv
Thanks!
HTML:
ul {
list-style-type: none;
margin-lef: 100;
padding: 0;
overflow: hidden;
}
li {
display: inline;
float: right;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 100px;
font: bold 30px/50px Georgia, serif;
background-color: #66ccff;
}
li a:hover {
background-color: #b3e6ff;
}
.left-middle-text {
margin-left: 150px;
}
.portfolio-text {
margin-left: -200px;
margin-top: -1200px;
text-align: center;
background-color: white;
color: white;
z-index: 5;
}
.background-blue {
background-color: #66ccff;
}
.background-silver {
background-color: silver;
}
.portfolio-placeholder {
background-color: silver;
padding: 20px;
margin: 20px;
width: 300px;
height: 300px;
}
.social-two {
width: 50px;
height: 50px;
display: block;
z-index: 5;
}
.social {
padding-top: 20px;
margin-left: 1400px;
width: 20px;
height: 20px;
display: block;
z-index: 5;
}
.white {
color: white;
}
.ptext {}
h1 {
font-size: 60px;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
margin-top: 100px;
margin-left: 300px;
padding: 60px;
font-family: "Comic Sans MS";
font-size: 40px;
}
.black-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: -150px;
z-index: -1;
}
.col-xs-6 {
text-align: center;
}
dbody {
padding: 20px;
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.wrapper {
float: left;
/* important */
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
position: absolute;
/* absolute position (so we can position it where we want)*/
top: 0px;
/* position will be on bottom */
margin-left: 100px;
width: 80%;
height: 90%;
/* styling bellow */
background-color: white;
color: white;
opacity: 0.2;
/* transparency */
filter: alpha(opacity=40);
/* IE transparency */
}
.image-static {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="background-blue">
<ul>
<li>
<img class="social-two" alt="Facebook page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEU6WJf////29/oeRo4sTpKwudAyU5S6wtV3iLJ7i7MtT5M2VZYoTJEYQ43t7/SIl7tIY57N0+JRaqHl6fDa3unDydu0vNK+xdhid6lsf6yosstYb6PS1+Rne6rn6vGDkriapcORnr8SQIzd4epDX5uhrMfw5inQAAAETklEQVR4nO3dW3eiMBSG4dCEjCVBDioe2tp2tP//Lw7YOkPX6BhkSPbO+t4rb3TxLAwIQRBJv31TbErBuXJTNPtvJtF7nZZSaRN6GUdmtJJlelGYKstdd85Ylf4lnNc29HL912w9/y6sZCzr75yRVV+4zkMv0ATl6z/CKkZgS6zOwrkMvSwTJedfwjq2MXjO1J/CNK6taD+bnoQq9HJMmOqEEa/C00oUSRnrKOwyZSIWsW5IP5ML0cQ8DNuB2IhCh16ISdOF2MQ8DNuBuBG8D3hvF7sPIYQQQgghhH5ntM4yZbvkqdNLq1TG/ujd6MzKPKu3xduuWVXPy8NhsVgcDsvlc7VaN+luxpnY4vLy8WN1eEiut+Z6JtRoK7e753/QvvrBU6jl8c1Bx1VobPZ+cOOxFGr5tHLmMRQauVkO8bET2tJx9DEVGrkb6uMlVL+vDolUKIs7fJyEeXMXkI8wH7SLYCi8G8hFKO/8irIRqvs2MnyEp6t6ohbK/W0Ia6H9GAHkIDTlGCAHoRz8Y5uZUG9HARkI8zGbGQ5C/ToOSF84dhWSF+rZSCB5oRx4VoadcNTvNRZCe/8xBROhHA0kLtSPsQttFb1wPJD27NrgL+l+tSu2T0fdTQRbfaxfZsXHK+UZUrseoJun20zaLNPmfM22MUZntGe5pfs57upFKtKWi7kf+u6fJD9eW/buCPyRM/0zgXU8C/zG9i89jsPwnS1QaCdgwxjodIJmz/j/ydmbi/CJ6Uamy2l/X/H9jrZCl2tmXljuB7+S/7pa7asHxqPQ7cBiRfnA4VZOp2g+stCLOSKn84ikD41u5fSrlPW/WzOXWcMjZ6FyOZHIeUPjdmTBeX8vrMPE6ANvocOMBe+75sjFbSHv21m4XGKyZL2lcTnCf+YtdPjhXUFIOhch60MLJ+Ga9Y1znITRr0Pac4O3chHyvr0ThBASSl/up4MwlVfe3Cv8WQDzeLmtyx5/duXNvcKfysluQ0YVfp85tTD8PhNCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBDCWIThZ9fM4+xiTjOk28vv7UVghjT+We5ruVypkPK4UuFKEEJIPwghpB+EENIPQgjpByGE9IMQQvpBCCH9IISQfhBCSD8IIaQfhBDSD0II6QchhPSDEEL6QQgh/SCEkH4QQkg/CCGkH4QQ0g9CCOkHIYT0gxBC+kEI4aDK//Q5g/IoLEWQP+37E5qNKEI8ZdCfUBciyCMI/AlVI4I8/MufUC5EUgYYiN6EpkxEkga4A4o3oU1bYRJgIHoTqqQTBliJvoTtKuyESe19JHoSnh473An9Py3Sk/D0EMJOmFS+n4DtR5hXyVmYrD0TvQjzzyfUfwqTSnodix6ERlZJX5jMa59b1OmFtj4/CFT0PtF6W48TC43tdhN/CdvPPErl5wZhEwqNVvKY9j5HfPvURVNsfBwSTycsN0Xz/WHDvwC3A1K2lfV16AAAAABJRU5ErkJggg==">
</li>
<li>
<img class="social-two" alt="Linkedin page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAaVBMVEUCdLP///8AbK8AcbK/2emw0OVGjsDi8PcAbbBMlMMAb7F1q9DR5fGSvtqNutgAdbTq9PmexN7J3+3z+fzY6fO41ecAebb3+/0VfbioyuFmpMwyiL5losslgrp9sdPf7fVXm8h5rtIAZ62sdI26AAAGH0lEQVR4nO3dbXeiPBAGYMKgRmoBRQFfeKn//0eu2rMrWmQGq09meOb+tHtOtVxNgJCExDPt5PUqkJ5Vnd+YvOs/k22TWV9+wqLZJh3CpCoseOMI2KJK7oXbInR9XC+NLSa3wg9/LOX3N+B/tIWN7/qA3hC/uQp3YwSeiLu/wuU4gSfi8ltYx66P5G2J64twN66raDvh7ixcuz6Mt2Z9EkbW9VG8MfbzJJyO7U7YDkyNl7g+iDcn8RZjvVV8x194wciFgbcZuXDjTUYunKhQelQoPyqUHxXKjwrlR4XyM1gIEFrfhiCmX2CYECzsd9Fyu4wOZShkGGeIMIybyXXQaradg4ReSLoQoKrNbRaHkH85koX+dGF+JtizL0aq0K/yDqAx6YH7lZgoDJedvnMq5qVIE/qPgYZ7lzlJ6Ec9QGM+WJciRRjOe4Em3XO+olKE8f1d4j4LzoVIEIb9dZR7PSUIswQVzhhXU1wYfqFAYw58ibjQdrVl7sN4dAcVQkEAmjT7rw54cHDhgSI0DdtqigptX3Pmmojt1RQV+huScMv2RMSFK5IwYNs4RYXHNUm4ElxLKTcL2cKAJOTbJYkLtyThUu55SGq0cZ78h9/x9xRgzvcREW+XwowgXLMtQkrLm9KoYdxXQyjDKaGSZmwrKekZH2+3cZ4nThDCvrsz+JqUcRGSeqIs1lHDuZuG1l8a9re+J5yBNCF4fXeMlce4jlJ79aF83GW64nwSeuSRGSgfVdRNzBtIHl2DuPPGn1fsB/TpY8D+9Gcxbkq+bZm/GTCOD/58k7Z4yWR/5F6A3sC5GOBnh2VQJ8lsHURNJuOdzKHzacBayIoYrIA5Ct/ROVHyo0L5UaH8qFB+VOgs8KqHFnZCgDCEOCuKfVkUWXz63y9nXPMSgo33h8/NYpbkucnz9NzEn0SHfRY+3wym9UTZ/nT3RCGf+nHI5yeXbd3Vc5nPVtEcnpxXThGWn0iqZz41vz3g0J9veydfzZbTB3/KXwvxbv2k468LyIRG89k+XIADYax5vXti7vxLhF3T2lBha34KhA1tLN3MdoMvOxyEtqTNaLlkMR14YWQg9Hcp8qM3yaNh11XnQghpEwVaGdZF61oIBfEMbKcuBhAdC6GkjKH//IUlnehW+CRwUCk6FUKBzZF/mJUMoUebFdiZLXU8waHQ2sFX0Xaoc5QcCo+02cePkhAnXjsUAv6WQ2+Ik3bdCavP3wGNoc00cycc1FTrDO0VCHfCF2ROKUTRwi3lcipamFBaNqKF5otQiLKFlPnzsoU54RlDtpAyZ1C4MDiOXZiOvgwJLTdOwjxNTsEmJN8Gv19wEaabqtmXWZYV5fxrQ2+zEpZLYCFcHeLzskWXrzkvYhR/UPtv1iKE6+Z4X9dCiGi1FX8BmYFw6XWdS35Dq6roQtbuhY+uFeGUVIo79sLq4W+3O8rn0VesXQsnPY0Sf4J/Hu9VdCyc9V0ooCCcimhXhmNhf8uZ8tocunKMW+G6/zKBv3FlTI0AHQuxNhdhMQC0Y9ipED26sEK/I8Uegp0K0fXuCS8ho28gOxXigysh3vOPNWqcCvHOQMKJiK0b41JY473yhPsFZyFh2wnCegechYRVe6BBvwVbhMulkLBAGOFiij1cuBQS9iiCUrSQMq4So+02xsKcNBCPPl5g3d4OhaR9pvDBfs5CygguvrIKY2FNGcEVLSStaSNaSFrXVYUqVKEKVahCFapQhSpUoQpVqEIVqlCFKlShClWoQhWqUIUqVKEKVahCFapQhSpUoQpVqEIVqlCFKlShClX4vxRib+ZIF3rZFMtTn9oTgJ6H/u4C+QLSzgGA5YWfevm38Nr94R1RofyoUH5UKD8qlB8Vyo8K5UeF8nMSEhbCkRx/49G2GBAbP/DW/HeA/03s2sOXcRWdLPVo20RIDcyNZ5ZjrqZ2eRL2LiIqPdnsJDTVeAvRVuYsJO31ITJQJBchYWVzofHPu2OehT0rMovO8bL+6UVodvhGEfJy/DBXoYme3FCYb8BGpi00m3JURrBlYG6FJo2KsRgBbBH9W63vn/B015gcitCXH1scJq21+lrCU/J6FUjP6m778j+U+ZGbamcRIwAAAABJRU5ErkJggg==">
</li>
<li><a onclick="scrollWin()">Portfolio</a></li>
</ul>
</div>
</div>
<div class="background-silver">
<h2 style="text-align:center;"> Michael Oelbaum </h2>
<h3 style="text-align:center"> Front-End Developer and UX/UI designer with experience in Japanese translation/interpretation
</div>
<!--Itachi background code
-->
<div class='wrapper'>
<!-- image -->
<div id="theFixed" style="position:fixed;top:200px">
<img src="https://images3.alphacoders.com/144/thumb-1920-144565.jpg" alt="Itachi Background. ">
<h1 class="white portfolio-text"> Portfolio </h1>
<div class='description'>
</div>
</div>
<!-- description div -->
<!-- description content -->
</div>
<h1 id=P ortfolio class="white portfolio-text"> Portfolio </h1>
<div class="row">
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
</div>
<!-- end description content -->
</div>
<!-- end description div -->

There is a wrapper div element called .container-fluid which has padding set to 15px (the whitespace you see) on either side. Either use a different class for this element, or add padding: 0px !important to your css.

I was able to add the following code to the top of the css:
.container-fluid {
padding: 0;
}
As long as this code is below any call to Bootstrap on a live site, you shouldn't need !important.

Added both the navbar and navbar-fixed-top classes to the nav tag according to the Bootstrap 3.3.7 documentation, given it's the version you're using, and added a margin-top: 80px to the background-silver class you're using for your "subnav" element, so it won't get behind your navbar when you scroll to the top.
Also, remember to import the rest of the bootstrap dependecies to your project, aka the bootstrap theme and it's JS functions.
Portfolio Page Link

I am not very good at css, but i believe that the . referse to a class ie, .button I would suggest using inspect element(ctrl-shift-i) to change the div you want to 100%, such as in my example :
My rats html

Switch CSS styles of two elements with link click

I have two tab buttons at the top of this webpage I'm in the middle of building. There are two styles associated with the buttons a dark blue representing unselected, and light blue mean already selected and view able on the page. The problem I'm having is that I searched through SO for a simple easy JS function that would switch the CSS styles and the one I have currently does a good job. The problem I'm having and you'll see this when you look at the page is that both start up with the dark blue background and I only want one of the links called "Overview" to begin with the light blue BG and the "Features" link to have the dark blue BG. When clicked both will switch with the page content.
web link to page
jQuery
$(function() {
var links = $('.scrollerbtn li a.slt').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML
<div class="scrollernav">
<ul class="scrollerbtn">
<li><a class="slt" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
<li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>
</div>
CSS
.scrollerbtn li a.slt {
display: inline;
color: #FFF;
text-align: center;
background-image: url(../../../images/tabbtnselect.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
.scrollerbtn li a.slt.active {
display: inline;
color: #333;
text-align: center;
background-image: url(../../../images/tabbtn.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}
How would I go about modifying this?

Add the active class to the 'Overview' tab.
<ul class="scrollerbtn">
<li><a class="slt active" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
<li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>

basically you need to do is change the active tab background image by clicking it right...?