I've been trying to figure out the issue for hours. I've tried to use .about_container {justify-content: space-evenly;} However, it doesn't add any spacing between the child items. Also, the items do not adjust size. I've tried adding flex-flow, flex-basis, and flex-shrink/grow but none of them make any difference. I'm also having issues getting the images to be a specific size while also being responsive.
I would appreciate any advice!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
max-width: 1300px;
width: 100%;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
#media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason > h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul id="links">
<li>Home</li>
<li>About Us</li>
<li>How-to</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason">
<h2>Jason R.</h2>
<img src="90528548_10213477312766132_4964276883236585472_n.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of
Applied Science degree in Computer Programming at Minnesota State
Community and Technical college. I am now a Computer Science major
at Davenport University. I work on both the front-end and back-end
within our small team. Outside of work, I enjoy playing video games,
biking, hiking, programming and learning about anything and everything!
I look forward to working with you!</p>
</div>
<div id="about_mike">
<h2>Michael J.</h2>
<img src="Mike.jpg"/>
<p>Hey there! My name is Mike. I live in Montrose,
Colorado where I remotely work with Jason and Sam.
I am a self-taught graphic designer/illustrator.
For several years, I have developed a strong graphic
design portfolio and have a collection of my journey
over the years on my own personal Wordpress at
my wordpress.
I am advanced in Adobe InDesign, Illustrator, and
Photoshop. Outside of work, I enjoy working on digital
art, reading, photography, and teaching myself how to program.
I am currently learning web development and python. I look
forward to working with my team and I look forward to working
with our clients we work with.</p>
</div>
<div id="about_sam">
<h2>Samantha K.</h2>
<img src="cropped_profile_picture.jpg"/>
<p>Hi everyone! My name is Samantha K. I started as a self
taught designer and am now making the big move to pursue
a degree in web design. I have experience in affinity designer,
html and css. I have a beautiful 2 year old daughter, Emily, and
a one year old puppy, Tobi. I live in Clifton, Colorado with my
fiance, my daughter, our best friend and our dog. I enjoy bike rides,
swimming, movies, photography, writing and creating digital art.
I look forward to learning, gaining experience and working with my
team to create beautiful designs.</p>
</div>
</div>
</body>
the problem is here. you have given the images the width and height values to remain the same in all sizes.
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
I created a single class for each person div (about). and I gave each picture the width property as 350 px. instead of giving a fixed width height value to the images, I added the properties display block, width 100%. So they will always adjust themselves according to it, no matter how much the container width is.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
justify-content: space-evenly;
}
.about {
width: 350px;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
display: block;
width: 100%;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
#media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason>h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul id="links">
<li>Home</li>
<li>About Us</li>
<li>How-to</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason" class="about">
<h2>Jason R.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of Applied Science degree in Computer Programming at Minnesota State Community and Technical college. I am now a Computer Science major at Davenport University. I work on both the front-end
and back-end within our small team. Outside of work, I enjoy playing video games, biking, hiking, programming and learning about anything and everything! I look forward to working with you!</p>
</div>
<div id="about_mike" class="about" >
<h2>Michael J.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey there! My name is Mike. I live in Montrose, Colorado where I remotely work with Jason and Sam. I am a self-taught graphic designer/illustrator. For several years, I have developed a strong graphic design portfolio and have a collection of my
journey over the years on my own personal Wordpress at
my wordpress. I am advanced in Adobe InDesign, Illustrator, and Photoshop. Outside of work, I enjoy working on digital art, reading, photography, and teaching myself how to program. I am currently
learning web development and python. I look forward to working with my team and I look forward to working with our clients we work with.</p>
</div>
<div id="about_sam" class="about">
<h2>Samantha K.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hi everyone! My name is Samantha K. I started as a self taught designer and am now making the big move to pursue a degree in web design. I have experience in affinity designer, html and css. I have a beautiful 2 year old daughter, Emily, and a one
year old puppy, Tobi. I live in Clifton, Colorado with my fiance, my daughter, our best friend and our dog. I enjoy bike rides, swimming, movies, photography, writing and creating digital art. I look forward to learning, gaining experience and
working with my team to create beautiful designs.</p>
</div>
</div>
Related
I am trying to build this design in HTML/CSS (see image below), but I am having trouble getting the background in with the number.
So far I have tried using a background image SVG - but on resize it is either getting stretched or the content does not fit anymore.
What I have so far:
.steps .step {
margin-top: -80px;
margin-bottom: 120px;
}
.steps .step .topblock {
position: relative;
margin-top: 40px;
background-size: contain;
background-repeat: no-repeat;
padding: 60px;
padding-bottom: 80px;
}
.steps .step .topblock .numberholder {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
}
.steps .step .topblock .numberholder .number {
color: #FE6631;
font-weight: bold;
border-radius: 50%;
background-color: white;
width: 50px;
height: 50px;
font-size: 24px;
line-height: 47px;
margin: 0 auto;
}
.steps .step .topblock h3 {
padding-top: 40px;
text-align: center;
color: white;
margin-bottom: 30px;
}
.steps .step .topblock ul {
list-style: none;
padding-left: 0;
padding-bottom: 20px;
}
.steps .step .topblock ul li {
text-align: center;
color: white;
}
.steps .step .bottomblock {
text-align: center;
margin-top: -30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container steps">
<div class="step">
<div class="topblock" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI1MSIgdmlld0JveD0iMCAwIDM3NSAyNTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNDQ1XzMyOCkiPgo8bWFzayBpZD0icGF0aC0xLWluc2lkZS0xXzQ0NV8zMjgiIGZpbGw9IndoaXRlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIiBmaWxsPSIjRkU2NjMxIi8+CjxwYXRoIGQ9Ik0xNS42ODU1IDQyLjYyNjdMMTYuNjgxNSA0Mi41MzcyTDE1LjY4NTUgNDIuNjI2N1pNMzAuNDI3MSAyMDYuNjI3TDI5LjQzMTEgMjA2LjcxNkwzMC40MjcxIDIwNi42MjdaTTM0NC41NzMgMjA2LjYyN0wzNDUuNTY5IDIwNi43MTZMMzQ0LjU3MyAyMDYuNjI3Wk0zNTkuMzE0IDQyLjYyNjdMMzU4LjMxOCA0Mi41MzcyVjQyLjUzNzJMMzU5LjMxNCA0Mi42MjY3Wk0xNjIuODI0IDI1LjIyNDNMMTYzLjc1NiAyNS41ODY1TDE2Mi44MjQgMjUuMjI0M1pNMjEzLjE3NiAyNS4yMjQzTDIxNC4xMDggMjQuODYyMUwyMTMuMTc2IDI1LjIyNDNaTTE4OCA5QzE5OS4wMzggOSAyMDguNDcyIDE1Ljg3ODUgMjEyLjI0NCAyNS41ODY1TDIxNC4xMDggMjQuODYyMUMyMTAuMDQ3IDE0LjQxMDkgMTk5Ljg5IDcgMTg4IDdWOVpNMTYzLjc1NiAyNS41ODY1QzE2Ny41MjggMTUuODc4NSAxNzYuOTYyIDkgMTg4IDlWN0MxNzYuMTEgNyAxNjUuOTUzIDE0LjQxMDkgMTYxLjg5MiAyNC44NjIxTDE2My43NTYgMjUuNTg2NVpNMjIuNjU3NCAzNkgxNTFWMzRIMjIuNjU3NFYzNlpNMTYuNjgxNSA0Mi41MzcyQzE2LjM2NTkgMzkuMDI1NiAxOS4xMzE3IDM2IDIyLjY1NzQgMzZWMzRDMTcuOTU2NCAzNCAxNC4yNjg3IDM4LjAzNDEgMTQuNjg5NSA0Mi43MTYyTDE2LjY4MTUgNDIuNTM3MlpNMzEuNDIzMSAyMDYuNTM3TDE2LjY4MTUgNDIuNTM3MkwxNC42ODk1IDQyLjcxNjJMMjkuNDMxMSAyMDYuNzE2TDMxLjQyMzEgMjA2LjUzN1pNMzcuMzk5IDIxMkMzNC4yOTM0IDIxMiAzMS43MDExIDIwOS42MyAzMS40MjMxIDIwNi41MzdMMjkuNDMxMSAyMDYuNzE2QzI5LjgwMTggMjEwLjg0IDMzLjI1ODMgMjE0IDM3LjM5OSAyMTRWMjEyWk0zMzcuNjAxIDIxMkgzNy4zOTlWMjE0SDMzNy42MDFWMjEyWk0zNDMuNTc3IDIwNi41MzdDMzQzLjI5OSAyMDkuNjMgMzQwLjcwNyAyMTIgMzM3LjYwMSAyMTJWMjE0QzM0MS43NDIgMjE0IDM0NS4xOTggMjEwLjg0IDM0NS41NjkgMjA2LjcxNkwzNDMuNTc3IDIwNi41MzdaTTM1OC4zMTggNDIuNTM3MkwzNDMuNTc3IDIwNi41MzdMMzQ1LjU2OSAyMDYuNzE2TDM2MC4zMSA0Mi43MTYyTDM1OC4zMTggNDIuNTM3MlpNMzUyLjM0MyAzNkMzNTUuODY4IDM2IDM1OC42MzQgMzkuMDI1NiAzNTguMzE4IDQyLjUzNzJMMzYwLjMxIDQyLjcxNjJDMzYwLjczMSAzOC4wMzQxIDM1Ny4wNDQgMzQgMzUyLjM0MyAzNFYzNlpNMjI1IDM2SDM1Mi4zNDNWMzRIMjI1VjM2Wk0xNjEuODkyIDI0Ljg2MjFDMTU5Ljk1OSAyOS44Mzc0IDE1NS45MjIgMzQgMTUxIDM0VjM2QzE1Ny4xMjQgMzYgMTYxLjY4OSAzMC45MDY5IDE2My43NTYgMjUuNTg2NUwxNjEuODkyIDI0Ljg2MjFaTTIxMi4yNDQgMjUuNTg2NUMyMTQuMzExIDMwLjkwNjkgMjE4Ljg3NiAzNiAyMjUgMzZWMzRDMjIwLjA3OCAzNCAyMTYuMDQxIDI5LjgzNzQgMjE0LjEwOCAyNC44NjIxTDIxMi4yNDQgMjUuNTg2NVoiIGZpbGw9IndoaXRlIiBtYXNrPSJ1cmwoI3BhdGgtMS1pbnNpZGUtMV80NDVfMzI4KSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfNDQ1XzMyOCIgeD0iLTcuMzQzMTQiIHk9IjAiIHdpZHRoPSIzODkuNjg2IiBoZWlnaHQ9IjI1MSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIxNSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMS41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzQ0NV8zMjgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDQ1XzMyOCIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K)"
;="">
<div class="numberholder">
<p class="number">1</p>
</div>
<h3>A tailor-made offer</h3>
<ul>
<li>For the (starting) entrepreneur</li>
<li>At least four months of Chamber of Commerce registration</li>
<li>A full lease financing</li>
</ul>
</div>
<div class="bottomblock">
<h3>Full lease financing for entrepreneurs</h3>
<p>Full lease financing for entrepreneurs At there is a unique opportunity for entrepreneurs to fully lease or finance the desired car. The car is then simply owned. But instead of counting down a large amount at once, you pay the...</p>
</div>
</div>
<div class="step">
<div class="topblock" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI1MSIgdmlld0JveD0iMCAwIDM3NSAyNTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNDQ1XzMyOCkiPgo8bWFzayBpZD0icGF0aC0xLWluc2lkZS0xXzQ0NV8zMjgiIGZpbGw9IndoaXRlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIiBmaWxsPSIjRkU2NjMxIi8+CjxwYXRoIGQ9Ik0xNS42ODU1IDQyLjYyNjdMMTYuNjgxNSA0Mi41MzcyTDE1LjY4NTUgNDIuNjI2N1pNMzAuNDI3MSAyMDYuNjI3TDI5LjQzMTEgMjA2LjcxNkwzMC40MjcxIDIwNi42MjdaTTM0NC41NzMgMjA2LjYyN0wzNDUuNTY5IDIwNi43MTZMMzQ0LjU3MyAyMDYuNjI3Wk0zNTkuMzE0IDQyLjYyNjdMMzU4LjMxOCA0Mi41MzcyVjQyLjUzNzJMMzU5LjMxNCA0Mi42MjY3Wk0xNjIuODI0IDI1LjIyNDNMMTYzLjc1NiAyNS41ODY1TDE2Mi44MjQgMjUuMjI0M1pNMjEzLjE3NiAyNS4yMjQzTDIxNC4xMDggMjQuODYyMUwyMTMuMTc2IDI1LjIyNDNaTTE4OCA5QzE5OS4wMzggOSAyMDguNDcyIDE1Ljg3ODUgMjEyLjI0NCAyNS41ODY1TDIxNC4xMDggMjQuODYyMUMyMTAuMDQ3IDE0LjQxMDkgMTk5Ljg5IDcgMTg4IDdWOVpNMTYzLjc1NiAyNS41ODY1QzE2Ny41MjggMTUuODc4NSAxNzYuOTYyIDkgMTg4IDlWN0MxNzYuMTEgNyAxNjUuOTUzIDE0LjQxMDkgMTYxLjg5MiAyNC44NjIxTDE2My43NTYgMjUuNTg2NVpNMjIuNjU3NCAzNkgxNTFWMzRIMjIuNjU3NFYzNlpNMTYuNjgxNSA0Mi41MzcyQzE2LjM2NTkgMzkuMDI1NiAxOS4xMzE3IDM2IDIyLjY1NzQgMzZWMzRDMTcuOTU2NCAzNCAxNC4yNjg3IDM4LjAzNDEgMTQuNjg5NSA0Mi43MTYyTDE2LjY4MTUgNDIuNTM3MlpNMzEuNDIzMSAyMDYuNTM3TDE2LjY4MTUgNDIuNTM3MkwxNC42ODk1IDQyLjcxNjJMMjkuNDMxMSAyMDYuNzE2TDMxLjQyMzEgMjA2LjUzN1pNMzcuMzk5IDIxMkMzNC4yOTM0IDIxMiAzMS43MDExIDIwOS42MyAzMS40MjMxIDIwNi41MzdMMjkuNDMxMSAyMDYuNzE2QzI5LjgwMTggMjEwLjg0IDMzLjI1ODMgMjE0IDM3LjM5OSAyMTRWMjEyWk0zMzcuNjAxIDIxMkgzNy4zOTlWMjE0SDMzNy42MDFWMjEyWk0zNDMuNTc3IDIwNi41MzdDMzQzLjI5OSAyMDkuNjMgMzQwLjcwNyAyMTIgMzM3LjYwMSAyMTJWMjE0QzM0MS43NDIgMjE0IDM0NS4xOTggMjEwLjg0IDM0NS41NjkgMjA2LjcxNkwzNDMuNTc3IDIwNi41MzdaTTM1OC4zMTggNDIuNTM3MkwzNDMuNTc3IDIwNi41MzdMMzQ1LjU2OSAyMDYuNzE2TDM2MC4zMSA0Mi43MTYyTDM1OC4zMTggNDIuNTM3MlpNMzUyLjM0MyAzNkMzNTUuODY4IDM2IDM1OC42MzQgMzkuMDI1NiAzNTguMzE4IDQyLjUzNzJMMzYwLjMxIDQyLjcxNjJDMzYwLjczMSAzOC4wMzQxIDM1Ny4wNDQgMzQgMzUyLjM0MyAzNFYzNlpNMjI1IDM2SDM1Mi4zNDNWMzRIMjI1VjM2Wk0xNjEuODkyIDI0Ljg2MjFDMTU5Ljk1OSAyOS44Mzc0IDE1NS45MjIgMzQgMTUxIDM0VjM2QzE1Ny4xMjQgMzYgMTYxLjY4OSAzMC45MDY5IDE2My43NTYgMjUuNTg2NUwxNjEuODkyIDI0Ljg2MjFaTTIxMi4yNDQgMjUuNTg2NUMyMTQuMzExIDMwLjkwNjkgMjE4Ljg3NiAzNiAyMjUgMzZWMzRDMjIwLjA3OCAzNCAyMTYuMDQxIDI5LjgzNzQgMjE0LjEwOCAyNC44NjIxTDIxMi4yNDQgMjUuNTg2NVoiIGZpbGw9IndoaXRlIiBtYXNrPSJ1cmwoI3BhdGgtMS1pbnNpZGUtMV80NDVfMzI4KSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfNDQ1XzMyOCIgeD0iLTcuMzQzMTQiIHk9IjAiIHdpZHRoPSIzODkuNjg2IiBoZWlnaHQ9IjI1MSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIxNSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMS41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzQ0NV8zMjgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDQ1XzMyOCIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K)"
;="">
<div class="numberholder">
<p class="number">2</p>
</div>
<h3>At a competitive financial lease rate</h3>
<ul>
<li>Annual figures without transfer</li>
<li>Lease or financing with renowned lease and financing partners</li>
<li>At attractive conditions</li>
</ul>
</div>
<div class="bottomblock">
<h3>Leasing or financing has never been easier</h3>
<p>In order to be able to offer the best conditions, we quickly and professionally compare all quotations from our lease and financing partners. We then offer you the best offer, fully customized. Without you having to worry about this or put in the
time. No financial statements, ...</p>
</div>
</div>
<div class="step">
<div class="topblock" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI1MSIgdmlld0JveD0iMCAwIDM3NSAyNTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNDQ1XzMyOCkiPgo8bWFzayBpZD0icGF0aC0xLWluc2lkZS0xXzQ0NV8zMjgiIGZpbGw9IndoaXRlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMjUgMzVDMjE5LjQ3NyAzNSAyMTUuMTc2IDMwLjM3MjIgMjEzLjE3NiAyNS4yMjQzQzIwOS4yNTkgMTUuMTQ0NyAxOTkuNDY0IDggMTg4IDhDMTc2LjUzNiA4IDE2Ni43NDEgMTUuMTQ0NyAxNjIuODI0IDI1LjIyNDNDMTYwLjgyNCAzMC4zNzIyIDE1Ni41MjMgMzUgMTUxIDM1SDIyLjY1NzRDMTguNTQ0IDM1IDE1LjMxNzMgMzguNTI5OCAxNS42ODU1IDQyLjYyNjdMMzAuNDI3MSAyMDYuNjI3QzMwLjc1MTUgMjEwLjIzNSAzMy43NzU5IDIxMyAzNy4zOTkgMjEzSDMzNy42MDFDMzQxLjIyNCAyMTMgMzQ0LjI0OSAyMTAuMjM1IDM0NC41NzMgMjA2LjYyN0wzNTkuMzE0IDQyLjYyNjdDMzU5LjY4MyAzOC41Mjk4IDM1Ni40NTYgMzUgMzUyLjM0MyAzNUgyMjVaIiBmaWxsPSIjRkU2NjMxIi8+CjxwYXRoIGQ9Ik0xNS42ODU1IDQyLjYyNjdMMTYuNjgxNSA0Mi41MzcyTDE1LjY4NTUgNDIuNjI2N1pNMzAuNDI3MSAyMDYuNjI3TDI5LjQzMTEgMjA2LjcxNkwzMC40MjcxIDIwNi42MjdaTTM0NC41NzMgMjA2LjYyN0wzNDUuNTY5IDIwNi43MTZMMzQ0LjU3MyAyMDYuNjI3Wk0zNTkuMzE0IDQyLjYyNjdMMzU4LjMxOCA0Mi41MzcyVjQyLjUzNzJMMzU5LjMxNCA0Mi42MjY3Wk0xNjIuODI0IDI1LjIyNDNMMTYzLjc1NiAyNS41ODY1TDE2Mi44MjQgMjUuMjI0M1pNMjEzLjE3NiAyNS4yMjQzTDIxNC4xMDggMjQuODYyMUwyMTMuMTc2IDI1LjIyNDNaTTE4OCA5QzE5OS4wMzggOSAyMDguNDcyIDE1Ljg3ODUgMjEyLjI0NCAyNS41ODY1TDIxNC4xMDggMjQuODYyMUMyMTAuMDQ3IDE0LjQxMDkgMTk5Ljg5IDcgMTg4IDdWOVpNMTYzLjc1NiAyNS41ODY1QzE2Ny41MjggMTUuODc4NSAxNzYuOTYyIDkgMTg4IDlWN0MxNzYuMTEgNyAxNjUuOTUzIDE0LjQxMDkgMTYxLjg5MiAyNC44NjIxTDE2My43NTYgMjUuNTg2NVpNMjIuNjU3NCAzNkgxNTFWMzRIMjIuNjU3NFYzNlpNMTYuNjgxNSA0Mi41MzcyQzE2LjM2NTkgMzkuMDI1NiAxOS4xMzE3IDM2IDIyLjY1NzQgMzZWMzRDMTcuOTU2NCAzNCAxNC4yNjg3IDM4LjAzNDEgMTQuNjg5NSA0Mi43MTYyTDE2LjY4MTUgNDIuNTM3MlpNMzEuNDIzMSAyMDYuNTM3TDE2LjY4MTUgNDIuNTM3MkwxNC42ODk1IDQyLjcxNjJMMjkuNDMxMSAyMDYuNzE2TDMxLjQyMzEgMjA2LjUzN1pNMzcuMzk5IDIxMkMzNC4yOTM0IDIxMiAzMS43MDExIDIwOS42MyAzMS40MjMxIDIwNi41MzdMMjkuNDMxMSAyMDYuNzE2QzI5LjgwMTggMjEwLjg0IDMzLjI1ODMgMjE0IDM3LjM5OSAyMTRWMjEyWk0zMzcuNjAxIDIxMkgzNy4zOTlWMjE0SDMzNy42MDFWMjEyWk0zNDMuNTc3IDIwNi41MzdDMzQzLjI5OSAyMDkuNjMgMzQwLjcwNyAyMTIgMzM3LjYwMSAyMTJWMjE0QzM0MS43NDIgMjE0IDM0NS4xOTggMjEwLjg0IDM0NS41NjkgMjA2LjcxNkwzNDMuNTc3IDIwNi41MzdaTTM1OC4zMTggNDIuNTM3MkwzNDMuNTc3IDIwNi41MzdMMzQ1LjU2OSAyMDYuNzE2TDM2MC4zMSA0Mi43MTYyTDM1OC4zMTggNDIuNTM3MlpNMzUyLjM0MyAzNkMzNTUuODY4IDM2IDM1OC42MzQgMzkuMDI1NiAzNTguMzE4IDQyLjUzNzJMMzYwLjMxIDQyLjcxNjJDMzYwLjczMSAzOC4wMzQxIDM1Ny4wNDQgMzQgMzUyLjM0MyAzNFYzNlpNMjI1IDM2SDM1Mi4zNDNWMzRIMjI1VjM2Wk0xNjEuODkyIDI0Ljg2MjFDMTU5Ljk1OSAyOS44Mzc0IDE1NS45MjIgMzQgMTUxIDM0VjM2QzE1Ny4xMjQgMzYgMTYxLjY4OSAzMC45MDY5IDE2My43NTYgMjUuNTg2NUwxNjEuODkyIDI0Ljg2MjFaTTIxMi4yNDQgMjUuNTg2NUMyMTQuMzExIDMwLjkwNjkgMjE4Ljg3NiAzNiAyMjUgMzZWMzRDMjIwLjA3OCAzNCAyMTYuMDQxIDI5LjgzNzQgMjE0LjEwOCAyNC44NjIxTDIxMi4yNDQgMjUuNTg2NVoiIGZpbGw9IndoaXRlIiBtYXNrPSJ1cmwoI3BhdGgtMS1pbnNpZGUtMV80NDVfMzI4KSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfNDQ1XzMyOCIgeD0iLTcuMzQzMTQiIHk9IjAiIHdpZHRoPSIzODkuNjg2IiBoZWlnaHQ9IjI1MSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIxNSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMS41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzQ0NV8zMjgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDQ1XzMyOCIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K)"
;="">
<div class="numberholder">
<p class="number">3</p>
</div>
<h3>Arranged within 24 hours</h3>
<ul>
<li>Good advice about monthly payments</li>
<li>All-in lease price: you know exactly where you stand in advance</li>
<li>The car is directly your property</li>
</ul>
</div>
<div class="bottomblock">
<h3>We advise you on which car fits which monthly costs</h3>
<p>In addition, protects you from too high charges. We use an automated credit check based on financial data from the Chamber of Commerce. If these figures show that the monthly costs for the car you have selected are too high, we will draw
your attention to this....</p>
</div>
</div>
</div>
This only gives me the correct result on a certain viewport width and does not work well responsive.
Thanks in advance
screenshot of design that I need to convert to HTML/CSS
What I have so far (which looks almost correct on this viewport width)
What happens on smaller screens
What happens on bigger screens
I have checked your screenshots and tried for myself. So basically what your problem is your background image doesn't stick in the middle so to correct add this code:
background-position: center;
to this class
.steps .step .topblock {
this will fix this problem for all screens other than mobile i think.
How it is suppose to look :
.steps .step .topblock {
position: relative;
margin-top: 40px;
background-size: contain;
background-repeat: no-repeat;
padding: 60px;
padding-bottom: 80px;
background-position: center;
}
and about your mobile responsiveness problem you need to work with media queries.
and since your background has a static height because you used (background-size: contain;)
you need to change that to make it look better on phone and that would be this code that covers the background instead of trying to contain itself into a small area:
#media only screen and (max-width: 780px) {
.steps .step .topblock {
background-size: cover;
}
Glad to be help. Let me know if you have questions!
I am currently practicing making a simple website. I have a problem in the navigation bar above my website. When I scroll further down my website, their color when I hover and their responsiveness disappears. Here's a pic to help you understand my problem.
I don't know if I use some codes right but here's my code, you can leave a tip or you can also add on how the code works so I can correct my mistake.
html,body{
height: 163%;
}
body{
background: rgba(236,232,225,255);
color: #333;
font-family: helvetica;
font-size: 15px;
line-height: .5cm;
margin: 0;
padding: 0;
}
/* links configuration here */
a{
text-decoration: none;
}
a:hover{
color:rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */
.whole{
margin-left: 50px;
margin-right: 50px;
font-size: 15px;
}
#webname{ /* heading here */
margin-top: 17%;
margin-bottom: 17%;
text-align: center;
font-size: 150px;
font-family: VALORANT;
color:white;
}
#webname:hover{
color: rgba(216, 110, 110, 0.933);
cursor: default;
}
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
}
.topnav a{
color: white;
padding-top: 15px;
padding-left: 25px;
padding-right: 5px;
float: left;
font-family: VALORANT;
font-size: 25px;
display: block;
}
.topnav a:hover{
color: rgba(216, 108, 108, 0.932);
}
.topnav img{
float: right;
padding-right: 15px;
}
#videoBG{ /* background vid */
position: absolute;
right: 0;
bottom: 30%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
/* Paragraphs starts here */
.gameplay{ /* First Paragraph here */
margin-top: 10px;
width: 30%;
float: left;
}
#paraFirst {
font-family: VALORANT;
font-size: 30px;
width: 38%;
}
#paraFirst:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.agents{ /* Second Paragraph here */
position: relative;
top: 250px;
float: right;
width: 40%;
}
#paraSec{
font-family: VALORANT;
font-size: 30px;
width: 20%;
}
#paraSec:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.guns{
position: relative;
top: 370px;
float: left;
width: 40%;
}
#paraThird{
font-family: VALORANT;
font-size: 30px;
width: 14%;
}
#paraThird:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.maps{
position: relative;
top: 780px;
float: right;
width: 40%;
}
#paraFour{
font-family: VALORANT;
font-size: 30px;
width: 14%;
}
#paraFour:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
.shootingRange{
position: relative;
top: 850px;
float: left;
width: 40%;
}
#paraFifth{
font-family: VALORANT;
font-size: 30px;
width: 50%;
}
#paraFifth:hover{
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
#media (min-aspect-ratio: 16/9){
#videoBG{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
#videoBG{
width: auto;
height: 100%;
}
}
#media (max-width: 767px){
#videoBG{
display: none;
}
body {
background: url('valoClip.png');
background-size: cover;
}
}
#font-face {
font-family: 'VALORANT';
src: url(fonts/Valorant\ Font.ttf);
font-style: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valorant</title>
<link rel="stylesheet" href="Valorant.css">
</head>
<body>
<!--Navigation Bar here-->
<img src="images/Valorant.png">
<div class="topnav">
<img src="images/Valorant.png">
Home
Gameplay
About
Guides
</div>
<!--Title-->
<h1 id="webname">valoraNt</h1>
<div class="wrapper">
<video id="videoBG" poster="valoClip.png" autoplay muted loop>
<source src="valoClip.mp4" type="video/mp4">
</video>
</div>
<!--Gameplay here-->
<div class="whole">
<div class="gameplay">
<h3 id="paraFirst">GAMEPLAY</h3>
<p>
Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
you'll need to think faster than your opponent if you want to survive. Take on foes across
Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
mode or tool to help you manage your aim.
</p>
<p> Watch the trailer here</p>
</div>
<!--Agents here-->
<div class="agents">
<h3 id="paraSec">AGENTS</h3>
<p>
Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
<br>
<br>
There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy,
Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
</p>
<p>
Each agent has four unique abilities (including ultimate).
<br>
<br>
So far, the agent abilities range from traditional utility from realistic shooter such as
flasbangs and smoke granades but also include magical or futuristic themed abilities like
conjuring walls and sonic arrows that act like a radar.
<br>
<br>
There are some agents that will be available for new accounts while other agents have to be
unlocked through progression or battle pass system.
</p>
</div>
<!--Guns here-->
<div class="guns">
<h3 id="paraThird">GUNS</h3>
<p>
Valorant has a buy phase at the beginning of each round. Every agent has access to the same
guns and shields in their shop.
<br>
<br>
There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger,
Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
</p>
<p>
Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns),
a secondary sidearm slot, and a knife.
<br>
<br>
During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun
for them if they're low on funds, announce that they have extra funds to purchase for a teammate,
or tell them to save their money for the round.
</p>
<p>
Guns vary in terms of:
<ul>
<li>Primary and alt fire settings</li>
<li>Damage output (based on head/body/legs)</li>
<li>Magazine capacity</li>
<li>Recoil pattern</li>
<li>Ability to pierce through walls</li>
</ul>
</p>
</div>
<!--Maps here-->
<div class="maps">
<h3 id="paraFour">MAPS</h3>
<p>
So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
<br>
<br>
The 5 playable maps are:
<ul>
<li>Bind</li>
<li>Haven</li>
<li>Split</li>
<li>Ascent</li>
<li>Icebox</li>
</ul>
</p>
<p>
Each map also has two ultimate orbs in neutral locations that teams can try to grab.
The orb grants one point the ulimate of the agent who picked it up.
<br>
<br>
Another general thing to note is that some walls and terrain can be fired through. As a rule
of thumb, anything that leaves a bullter hole can be penetrated.
</p>
</div>
<!--Shooting Range here-->
<div class="shootingRange">
<h5 id="paraFifth">SHOOTING RaNGE</h5>
<p>
The last existing map is dedicated to practicing and honing your skills. Here you can
change your agent and guns at anytime (you can even teset characters that you do not own yet).
<br>
<br>
At the shooting range, you can shoot at dummies that spawn at different speeds and settings such
as strafing.
<br>
<br>
There is also an area dedicated to shooting long-distance targets to test the effective range of
guns.
<br>
<br>
Lastly, you can also practice scenarios such as planting a spike and then defending against bots
to improve your composure and ability in clutch situations.
</p>
</div>
</div>
</body>
</html>
I think the name of every paragraphs overlaps the links in the navbar. Thanks for the help, much appreciated :>
You can achieve the same look with margins instead of relative position
I have added a few classes to your CSS .mt-250 which will only add 250px margin in top of element, .width-40 make the width of element 40% of parent, .left and .right will make the element float to left or float to right
and delete some redundant class .gameplay, .agents, .guns, .maps, .shootingRange and replace them with the newly created class
for example this line <div class="mt-250 width-40 right"></div> will mean that this div will have a 250px margin in top of it and has a width of 40% and will float to the right
also delete some redundant IDs #paraFirst, #paraSec, #paraThird, #paraFour, #paraFifth and it's :hover change all of them with a single new class called paraheader to make Constant look and feel with all paragraph headers
note that all the above changes eliminate redundancy in style at Paragraphs sections and reduces number of line from 88 line to 15 line only which lead to faster loading on real network
working markup
html,
body {
height: 163%;
}
body {
background: rgba(236, 232, 225, 255);
color: #333;
font-family: helvetica;
font-size: 15px;
line-height: .5cm;
margin: 0;
padding: 0;
}
/* links configuration here */
a {
text-decoration: none;
}
a:hover {
color: rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */
.whole {
margin-left: 50px;
margin-right: 50px;
font-size: 15px;
}
#webname {
/* heading here */
margin-top: 17%;
margin-bottom: 17%;
text-align: center;
font-size: 150px;
font-family: VALORANT;
color: white;
}
#webname:hover {
color: rgba(216, 110, 110, 0.933);
cursor: default;
}
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
}
.topnav a {
color: white;
padding-top: 15px;
padding-left: 25px;
padding-right: 5px;
float: left;
font-family: VALORANT;
font-size: 25px;
display: block;
}
.topnav a:hover {
color: rgba(216, 108, 108, 0.932);
}
.topnav img {
float: right;
padding-right: 15px;
}
#videoBG {
/* background vid */
position: absolute;
right: 0;
bottom: 30%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
/* Paragraphs starts here */
.mt-250 { margin-top: 250px}
.left {float: left}
.right { float: right}
.width-40 {width: 40%;}
.paraheader{
font-family: VALORANT;
font-size: 30px;
width: 38%;
}
.paraheader:hover {
color: rgba(216, 108, 108, 0.932);
cursor: default;
}
#media (min-aspect-ratio: 16/9) {
#videoBG {
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
#videoBG {
width: auto;
height: 100%;
}
}
#media (max-width: 767px) {
#videoBG {
display: none;
}
body {
background: url('valoClip.png');
background-size: cover;
}
}
#font-face {
font-family: 'VALORANT';
src: url(fonts/Valorant\ Font.ttf);
font-style: normal;
}
<!--Navigation Bar here-->
<img src="images/Valorant.png">
<div class="topnav">
<img src="images/Valorant.png">
Home
Gameplay
About
Guides
</div>
<!--Title-->
<h1 id="webname">valoraNt</h1>
<div class="wrapper">
<video id="videoBG" poster="valoClip.png" autoplay muted loop>
<source src="valoClip.mp4" type="video/mp4">
</video>
</div>
<!--Gameplay here-->
<div class="whole">
<div class="left width-40">
<h3 class="paraheader">GAMEPLAY</h3>
<p>
Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
you manage your aim.
</p>
<p> Watch the trailer here</p>
</div>
<!--Agents here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">AGENTS</h3>
<p>
Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
<br>
<br> There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy, Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
</p>
<p>
Each agent has four unique abilities (including ultimate).
<br>
<br> So far, the agent abilities range from traditional utility from realistic shooter such as flasbangs and smoke granades but also include magical or futuristic themed abilities like conjuring walls and sonic arrows that act like a radar.
<br>
<br> There are some agents that will be available for new accounts while other agents have to be unlocked through progression or battle pass system.
</p>
</div>
<!--Guns here-->
<div class="left mt-250 width-40">
<h3 class="paraheader">GUNS</h3>
<p>
Valorant has a buy phase at the beginning of each round. Every agent has access to the same guns and shields in their shop.
<br>
<br> There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger, Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
</p>
<p>
Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns), a secondary sidearm slot, and a knife.
<br>
<br> During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun for them if they're low on funds, announce that they have extra funds to purchase for a teammate, or tell them to save their money for the round.
</p>
<p>
Guns vary in terms of:
<ul>
<li>Primary and alt fire settings</li>
<li>Damage output (based on head/body/legs)</li>
<li>Magazine capacity</li>
<li>Recoil pattern</li>
<li>Ability to pierce through walls</li>
</ul>
</p>
</div>
<!--Maps here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">MAPS</h3>
<p>
So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
<br>
<br> The 5 playable maps are:
<ul>
<li>Bind</li>
<li>Haven</li>
<li>Split</li>
<li>Ascent</li>
<li>Icebox</li>
</ul>
</p>
<p>
Each map also has two ultimate orbs in neutral locations that teams can try to grab. The orb grants one point the ulimate of the agent who picked it up.
<br>
<br> Another general thing to note is that some walls and terrain can be fired through. As a rule of thumb, anything that leaves a bullter hole can be penetrated.
</p>
</div>
<!--Shooting Range here-->
<div class="left mt-250 width-40">
<h5 class="paraheader">SHOOTING RaNGE</h5>
<p>
The last existing map is dedicated to practicing and honing your skills. Here you can change your agent and guns at anytime (you can even teset characters that you do not own yet).
<br>
<br> At the shooting range, you can shoot at dummies that spawn at different speeds and settings such as strafing.
<br>
<br> There is also an area dedicated to shooting long-distance targets to test the effective range of guns.
<br>
<br> Lastly, you can also practice scenarios such as planting a spike and then defending against bots to improve your composure and ability in clutch situations.
</p>
</div>
</div>
If you add z-index: 1; to .topnav, your problem will be solved. Because, topnav falls under the other contents that comes after topnav such as text, anchor est.
The problem seemed to be with the z-index of the navbar. Add a z-index of 99999 to the topnav class like done below:
.topnav {
position: fixed;
overflow: hidden;
background-color: #333;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
width: 100%;
z-index: 99999999;
}
that seemed to fix it for me! If it worked mark my anwser as solved and if not let me know!
I have created a static website using html and css, the problem is that when I shrink the browser the text inside of the footer goes outside of the footer, how can I make so that the text always stays in the footer regardless of whether I shrink the browser or not?
* {
margin: 0px;
padding: 0px;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-family: 'Open Sans';
font-size: 40px;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Open Sans';
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.logo-section {
margin-left: 15px;
margin-top: 15px;
}
.main {
min-height: calc(100vh - 70px);
background-color:#F1F1F1;
overflow: hidden;
}
.footer {
width: 100%;
height: 100%;
background-color: black;
color: gray;
font-family: 'Open Sans';
font-size: 15px;
}
.first-box {
width: 45%;
margin: 0 auto;
margin-top: 50px;
}
.first-box-text {
margin-top: 20px;
font-family: 'Open Sans';
}
.centered-p {
text-align: center;
margin-top: 20px;
font-family: 'Open Sans';
}
.second-word {
color: #ffa200;
text-decoration: underline;
}
.centered-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.header {
height: 8%;
}
.logo-img {
margin-top: 10px;
height: 50px;
}
.flex-container {
display: flex;
margin-top: 50px;
margin-left: 17%;
}
section {
flex: 2;
}
aside {
flex: 1;
}
.bordered-div {
margin-top: 50px;
text-align: center;
padding: 15px;
font-family: 'Open Sans';
font-size: 25px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.flex-container-first-section-a {
color: #ffa200;
text-decoration: none;
border-bottom: 2px solid #ffa200;
}
.aside-first-section {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.aside-img {
margin-left: 50px;
margin-top: 20px;
}
.third-section {
margin-top: 25px;
font-family: 'Open Sans';
}
.forth-section-h1{
margin-left: 28%;
margin-top: 50px;
font-family: 'Open Sans';
}
.forth-section-p {
margin-left: 90px;
margin-top: 40px;
font-family: 'Open Sans';
}
.bordered-div-h1-upper-case {
text-transform: uppercase;
}
.image-container {
display: flex;
margin-top: 30px;
}
.image-container-img {
padding: 5px;
}
.img-with-text {
margin: 10px;
font-family: 'Open Sans';
}
.img-with-text-span {
border-top: solid 3px #ffa200
}
.second-section {
margin-top: 10px;
font-family: 'Open Sans';
}
.bottom-message {
height: 300px;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
border: solid 2px black;
}
.bottom-message-button {
width: 50%;
height: 15%;
margin-top: 50px;
background-color: #ffa200;
border-radius: 4px;
border: none;
color: white;
font-family: 'Open Sans';
font-size: 20px;
font-weight: bold;
}
.bottom-message-content {
margin-top: 60px;
margin: 70px;
}
.centered-heading {
font-family: 'Open Sans';
}
.flex-container-first-p {
font-family: 'Open Sans';
}
.bottom-message-h1, .bottom-message-content-p {
font-family: 'Open Sans';
margin-top: 20px;
}
.footer-section {
width: 50%;
margin: 0 auto;
}
.footer-content {
margin: 0px;
padding: 0px;
}
.footer-links-a {
color: gray;
text-decoration: none;
border-right: 1px solid;
padding-right: 23px;
}
.capital-words {
text-transform: uppercase;
padding-top: 10px;
}
.footer-links {
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
.copyright-p {
padding-top: 10px;
}
.aside-h2 {
font-size: 15px;
text-align: center;
margin-top: 10px;
}
.aside-third-section > img {
height: 250px;
}
.line {
border-bottom: solid 2px black;
width: 70%;
margin: 0 auto;
padding-top: 50px;
}
.box-message {
height: 200px;
width: 280px;
margin-top: 50px;
margin-left: 80px;
border: solid 2px black;
}
.box-message-p {
font-family: 'Open Sans';
margin-top: 50px;
width: 60%;
margin: 0 auto;
margin-top: 35px;
font-size: 15px;
}
.box-message-button, .box-message-a {
margin-top: 30px;
margin-left: 70px;
}
.box-message-a {
color: #ffa200;
text-decoration: none;
border-bottom: solid 2px #ffa200;
font-size: 25px;
}
.trending-news-div {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 70px;
margin-top: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
<div class="container">
<div class="header">
<div class="nav">
<h1 class="nav-h1">Nip & Tuck</h1>
<div class="a-container">
<a>Lifestyle</a>
<a>Culture</a>
<a>Sports</a>
<a>Politics</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/twitter-logo.PNG" alt="twitter logo">
<img class="logo-img"src="/assets/images/youtube-logo.png" alt="youtube logo">
<img class="logo-img"src="/assets/images/facebook-logo.png" alt="facebook logo">
</div>
</div>
</div>
<div class="main">
<div class="first-box">
<h1 class="centered-heading">How one woman gave her boss, her ex-boyfriend and all her doubters, the big middle finger</h1>
<p class="first-box-text">Janice Allbright decided enough was enough. It was time to change her life. After six months of stock trading, the final result was renewed confidence, increased happiness and £128,405!
</p>
<p class="centered-p">By
<a class="second-word">Kelly Chang</a>
| 30.06.2020</p>
<img src="/assets/images/center-image.png" alt="woman carrying a bag" class="centered-img">
<p class="centered-p">"It's not arrogance, it's confidence"</p>
</div>
<div class="flex-container">
<section>
<p class="flex-container-first-p">
“My life was basically sh!t, says Janice Allbright, a single woman whose life was literally in the toilet six months ago. “I was working at a shop on the high street, earning next to nothing. Then I would go home to my abusive boyfriend. Not exactly a fairytale life.” Everything changed for Janice when she discovered online trading while killing time on her lunch break. “My colleagues, friends and boyfriend at the time all doubted me. Now I’m the queen bitch, laughing at their tears.”
</p>
<div class="bordered-div">
<p>Change your life with the Online Investing System</p>
<a class="flex-container-first-section-a" href="">Get started for free</a>
</div>
<img src="/assets/images/second-center-image.PNG" alt="woman talking on the phone" class="centered-img">
<p class="centered-p">A new and better life</p>
<section class="second-section">
<p>Janice credits her amazing financial success to trading stocks online. The highschool dropout had concerns at the beginning, due to her lack of financial knowledge and experience. “It turned out there was nothing to worry about,” she says. “My broker provided me with all of the training and tools I needed to become a successful stock trader. Their patience was amazing.” </p>
</section>
<section class="third-section">
<p>Brokers and platforms, like the Online Investing System, have turned novice investors into financial superheroes. People like Janice have taken advantage of some tough competition amongst brokers to get the best services for lower prices. Sometimes even for free. “I didn’t have any money for fancy financial tools or software. But lucky me, my broker gave me everything for free.”</p>
</section>
<section class="forth-section">
<img src="/assets/images/third-center-image.PNG" alt="" class="centered-img">
<h1 class="forth-section-h1">"Now I do whatever the f#ack I want when I f#cking want"</h1>
<p class="forth-section-p">Janice believes that her success has given her the confidence to deal with anything life throws her way. And she openly admits that displaying her wealth has become a guilty pleasure. “I was driving in my G Wagon a few weeks ago and noticed my ex-boyfriend waiting at the bus stop. I could resist. I stopped my car, rolled down the window and happily presented my middle finger. I drove away with a smile. Life is good.”</p>
</section>
<div class="bordered-div">
<p>Learn more about online stock trading and how you can profit </p>
<a class="flex-container-first-section-a" href="">Start Now</a>
</div>
<div class="bordered-div">
<h1 class="bordered-div-h1-upper-case">Celebrity News </h1>
</div>
<div class="image-container">
<div class="img-with-text">
<img src="/assets/images/hollywood-image.PNG" alt="hollywod sign" class="image-container-img">
<div class="img-with-text-bottom">
<h4 class="img-with-text-h4">Ass-tastic! We rank the best bums in Hollywood.</h4>
<span class="img-with-text-span">By Lili Johnson 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<div class="img-with-text-bottom">
<img src="/assets/images/laptop-image.PNG" alt="a picture of a laptop" class="image-container-img">
<h4 class="img-with-text-h4">Coming soon to Netflix. See which movies have us hot and bothered.</h4>
<span class="img-with-text-span">By Gavin Lewis 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<img src="/assets/images/couple-fighting-image.PNG" alt="a picture of a couple fighting" class="image-container-img">
<h4 class="img-with-text-h4">Another celebrity couple calls it quits. Why can't the rich and famous stay together?</h4>
<span class="img-with-text-span">By Adriana Huber 30.06.2020</span>
</div>
</div>
<div class="bottom-message">
<div class="bottom-message-content">
<h1 class="bottom-message-h1">The rich are getting richer</h1>
<p class="bottom-message-content-p">And so can you. By becoming an online trader of currencies, stocks and commodities, you too can increase your monthly income and upgrade your standard of living </p>
<button class="bottom-message-button">Start with free 1-on-1 coaching</button>
</div>
</div>
</section>
<aside>
<div class="aside-first-section">
<h3>Hot Topics</h3>
</div>
<div class="aside-second-section">
<img src="/assets/images/second-column-first-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Man steals £ 2,500,000 from the <br> bank with a legal loophole!</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-second-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Does praying to God for money <br> actually work?</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-sixth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Japanese scientists have <br> discovored the secret of making money. Find out if it's real.</h2>
</div>
<div class="box-message">
<div class="box-message-content">
<p class="box-message-p">Learn more about online stock trading and how you can profit.</p>
<a class="box-message-a" href="">Start Now</a>
</div>
</div>
<div class="trending-news-div">
<h3>Trending Financial News</h3>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-third-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Royal family goes bancrupt. <br> Could be out on the streets very soon.</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-forth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Man wins the lottery and blows it <br> all in a Spanish casino.</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-fifth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Silver vs Gold. Our experts give <br> you the breakdown.</h2>
</div>
</aside>
</div>
</div>
<div class="footer">
<section class="footer-section">
<div class="footer-content">
<p class="capital-words">TERMS AND CONDITIONS CAREFULLY READ AND AGREE TO TERMS BELOW:</p>
<br>
<p>We are not affiliated in any way with any news publication. All trademarks on this web site whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services. It is important to note that this site and the comments/answers depicted above is to be used as an illustrative example of what some individuals have achieved with this/these products. The website, and any page on the website, is based loosely off a true story, but has been modified in multiple ways including, but not limited to: the story, the photos, and the comments. Thus, this page, and any page on this website, are not to be taken literally or as a non-fiction story. Ther page, and the results mentioned on this page, although achievable for some, are not to be construed as the results that you may achieve on the same routine. I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS/THESE PRODUCTS, AND THAT THE STORY/COMMENTS DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site.</p><br>
<p class="capital-words">IMPORTANT CONSUMER DISCLOSURE</p><br>
<p>The term "advertorial" is a combination of "advertisement" and "editorial" written in an editorial format as an independent news story, when in fact the advertisement may promote a particular product or interest. Advertorials take factual information and report it in an editorial format to allow the author, often a company marketing its products, to enhance or explain certain elements to maintain the reader's interest. A familiar example is an airline's in-flight magazines that provide an editorial reports about travel destinations to which the airline flies.</p><br>
<p>As an advertorial, I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS PROGRAM, AND THAT THE STORY DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site. Ther program is not a job but an educational opportunity that can help individuals learn how to earn money through their entrepreneurial efforts. Anyone who decides to buy any program about making money will not necessarily make money simply by purchasing the program. People who think "I bought these materials so I'm going to automatically make money" are wrong. As any type of education has so many variables, it is impossible to accurately state what you may expect to achieve, however, people who bought the program not only bought the program, but also undertook additional training and education, applied the principles to an area of the market that was growing, kept their commitments and continued to learn. If you do what the individuals depicted did, you may generally expect to achieve a great education in the area of your choice, but you should not expect to earn any specific amount of money. Typical users of the starter materials that don't enroll in coaching, don't keep their commitments and don't implement what they learn, generally make no money. Though the success of the depicted individual is true, her picture and name have been changed to protect her identity. Consistent with the advertorial concept, the comments posted in the comment section are also representative of typical comments and experiences which have been compiled into a comment format to illustrate a dialogue, however, the comments are not actual posts to this webpage and have been compiled or generated for illustrative purposes only.</p><br>
<p>We are not affiliated in any way with CNN, WebTV, News Channel 1, ABC, NBC, CBS, U.S. News or FOX, and all such trademarks on this web site, whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services.</p>
</div>
<div class="footer-links">
<a class="footer-links-a" href="">Cookie Policy</a>
<a class="footer-links-a" href="">Privacy Policy</a>
<a class="footer-links-a" href="">Data Processing Agreement</a>
<a class="footer-links-a" href="">Terms and Conditions</a>
</div>
<p class="testimonials-p">*Testimonials:
All characters, information and events depicted on This Website are entirely fictitious. Any similarity to actual events or persons, living or dead, is purely coincidental.</p>
<p class="copyright-p">© fortunetonight.com 2020</p>
</section>
</div>
</div>
I tried setting the width in pixels and ems but that still doesn't fix the issue
You have a width of 800px set on .footer-links
That means, no matter how wide your window is, it will keep it at 800px which will make you scroll side to side.
Change the width of .footer-links to be 100% or just remove it all together and that should fix it.
You could use the #media rule in your css..
#media(max-width: 1000px){
.footer-links {
width: 600px;
margin: 0 auto;
margin-top: 50px;
}
}
Link to more on #media --> https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am trying to make an about page, I have text at the top and I want to have two images next to each other at the bottom, the problem I keep having is I can't figure out how to get them next to each other, they are at the bottom but they are on top of each other. I want them to be equal size both taking up 50% of the width of the Div box. I am a beginner at HTML and this is my first big project.
Here is my code
h1 {
color: white;
font-size: 50px;
font-family: ultra;
}
p {
color: white;
}
h2 {
color: white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color: #252525;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
img.img-1 {
float: left;
}
img.img-2 {
float: right;
}
.article {
display: inline-block;
width: 60%;
}
img {
margin-right: 10px;
width: 100%;
height: 50%;
}
.clear {
clear: both;
}
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div>
<div class="main">
<div class="rcorners1">
<div>Parapsychologists Peter Venkman, Raymond Stantz, and Egon Spengler were scientists working for Columbia University. After being called to the New York Public Library to investigate the recent paranormal activity, they encounterd a full-fledged ghost
but she frightend them away. They lost their jobs at the university after that, so the trio established the Ghostbusters, a paranormal investigation and elimination service. They developed high-tech equipment to capture ghosts and they opened
their business in a disused, run-down firehouse. In their first outing, Egon warns them never to cross the energy streams of their proton pack weapons, as this could cause a catastrophic explosion, and they captured their first ghost, Slimer,
depositing it in a specially built containment unit in the firehouse basement. As the paranormal activity increased in New York City, they hired a fourth member, Winston Zeddemore, to cope with demand.</div>
<div>The Ghostbusters were then called by cellist Dana Barrett, whose apartment was haunted by a demonic spirit, Zuul, a demigod worshipped as a servant to Gozer the Gozerian, a shape-shifting god of destruction and chaos. As the Ghostbusters investigated,
Dana was possessed by Zuul, which declared itself the "Gatekeeper", and Louis was also possessed by a similar demon, Vinz Clortho, the "Keymaster". Both demons speaked of the coming of the destructive Gozer and the release of the imprisoned ghosts.
The Ghostbusters took steps to keep the two apart.</div>
Walter Peck, a lawyer representing the Environmental Protection Agency, had the Ghostbusters arrested for operating as unlicensed waste handlers and he orderd their ghost containment system deactivated, causing the explosion that released the ghosts and
Louis/Vinz. The ghosts wreaked havoc throughout the city while Louis/Vinz advanced toward Dana/Zuul's apartment. After consulting blueprints of Dana's apartment building, the Ghostbusters learned that mad doctor and cult leader Ivo Shandor, declared
humanity too sick to deserve existing after World War I, designed the building as a gateway to summon Gozer and bring about the end of the world.
<div>The Ghostbusters were released from custody to combat the supernatural crisis. On the apartment building roof, Zuul and Vinz opened the gate between dimensions and they transformed into supernatural hellhounds. Gozer, in the form of a woman, is
subdued by the team, disappearing entirely, as her voice echoes that the "destructor" will follow, taking a form chosen by the team; Ray inadvertently recalls a beloved corporate mascot from his childhood "something that could never, ever possibly
destroy us" and the destructor arrived in the form of a giant Stay Puft Marshmallow Man that attacked the city. The Ghostbusters crossed their proton pack energy streams and fire them at Gozer's portal; the explosion closed the gate, destroys
Stay Puft/Gozer, and frees Dana and Louis. The Ghostbusters were welcomed on the street as heroes. After these events we changed our company name to Bust A Ghost and we continued to work catching ghosts, and we still are today. Also these events
were made in a documentry about us ca
</div>
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt="" /></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt="" /></div>
</div>
<div class="clear"></div>
</div>
</div>
You are having this issue because you assigned width: 60% to each div and that makes more than 100% for both together. You have to make them 50% and instead of display:inline-block, make them float:left followed with a clear:both. Try this code.
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt=""/></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt=""/>
</div>
<div class="clear"></div>
.article {
float:left;
width: 50%;
height: 100px;
overflow: hidden;
}
img {
width: 100%;
height: 50%;
}
Use
.article{
width: 50%;
float: left;
}
For instance, you can't have white spaces in image source (src="Our Gadgets.jpg"). User slash or underline instead.
HTML
<div class="images">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
</div>
CSS
.images img {
display: block;
width: 50%;
float: left;
}
A few tiny problems have been torturing me for weeks. After many researches and many trials I still can't figure out what to do.
On my online resume, the desktop display if perfect. On mobile though, there are many inconsistencies with font and images sizes.
Link of the page: t.btmx.fr
Problems
If you have an idea what's wrong or if there's something I should learn that would be very helpful :)!
Thank you very much!
Below is the code as asked by Paulie_D. I'm sorry if it's so long I don't know what to remove :(. First you'll find the CSS for small screens using media queries, then the "normal" CSS and then the HTML.
#
media screen and(max - width: 1000px) {
header {
font - size: 1em;
}
p {
font - size: 0.8em;
}
#
contact_button {
font - size: 1em;
}
#
personal - info - and - topskills {
display: flex;
flex - direction: column;
}
#
containermain {
display: flex;
flex - direction: column;
}
.topitem: nth - child(2) {
max - width: 100 % ;
}
.subelementspecial /* floating logo | title */ {
display: flex;
flex - direction: column;
}
}
header {
border-radius: 0.5em;
background-color: #AFC600;
opacity: 0.7;
margin: auto;
margin-bottom: 4em;
padding-bottom: 0.1em;
padding-top: 0.1em;
font-size: 0.8em;
text-align: center;
max-width: 1920px;
}
.bg1 {
background: url("medias/background.jpg") no-repeat top center;
}
.bg2 {
background: #232A2A;
}
#main-wrapper {
width: 100%;
background-attachment: scroll;
background-size: contain;
font-family: "texgyrescholaregular", Verdana, Georgia, serif;
}
#personal-info-and-topskills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
padding: 2em;
}
.topitem {
border-radius: 0.5em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
}
.topitem h2 {
margin-bottom: 1.5em;
}
.topitem:nth-child(2) {
opacity: 0.9;
min-width: 300px;
background-color: #3D3D39;
border-radius: 0.5em;
/* padding : top right bottom left */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
max-width: 40em;
}
.topitem:nth-child(2) p {
color: white;
line-height: 2em;
}
.topitem:nth-child(2) strong {
color: #d8616f;
}
#contact_button {
background: #D3D699;
text-align: center;
color: black;
border-radius: 1em;
width: 40%;
margin: auto;
margin-bottom: 1em;
margin-top: 1em;
}
.topitem:nth-child(3) {
background: #C4D9D0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.topitem:nth-child(3) h2 {
color: black
}
#languages {
width: 100%;
}
.topitem:nth-child(4) {
background: #e0cece;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 350px;
}
.topitem:nth-child(4) h2 {
color: #b25960;
}
#containermain
/* contains experience, skills and education */
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: flex-start;
padding: 2em;
}
.cmain-element {
background-color: #FCF8F5;
border-radius: 1em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
max-width: 1500px;
/*properties for all the childs*/
}
.cmain-element:nth-child(1) {
flex: 1;
}
.cmain-element:nth-child(2) {
flex: 1;
}
.float-logo-title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.work-place-time h3 {
margin-top: 0.1em;
}
.logo {
margin-right: 30px;
}
#hobbies-passions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
align-items: flex-start;
background-color: #FCF8F5;
border-radius: 5px;
width: 40em;
margin: auto;
margin-bottom: 3em;
}
#hobbies-img {
text-align: center;
}
footer {
display: flex;
height: 60px;
border-radius: 5px;
background-color: #546363;
opacity: 0.8;
margin: auto;
max-width: 1920px;
}
#footerbox {
width: 40%;
display: flex;
margin: auto;
justify-content: space-around;
}
#font-face {
font-family: 'texgyrescholaregular';
src: url('font/texgyreschola-regular-webfont.eot');
src: url('font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/texgyreschola-regular-webfont.woff') format('woff'), url('font/texgyreschola-regular-webfont.ttf') format('truetype'), url('font/texgyreschola-regular-webfont.svg#texgyrescholaregular') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {
color: #DE7F89;
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
}
p {
font-size: 0.9em;
line-height: 1.5em;
}
ol,
ul {
font-size: 0.9em;
line-height: 1.5em;
/* for changing indent
padding-left: 30px;
*/
}
/*strong=default*/
a {
color: green;
text-decoration: none;
font-style: italic;
}
a:hover {
color: green;
}
a:active {
color: red;
}
a:visited {
color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="smallscreen.css" />
<meta charset="utf-8">
<title>Resume - Thibault Bétrémieux</title>
<link rel="icon" href="http://t.btmx.fr/wp-content/uploads/2016/07/favicon.png">
</head>
<div class="bg2">
<body>
<div class="bg1">
<div id="main-wrapper">
<header>
<h1>Thibault Bétrémieux - Resume as of 16<sup>th</sup> July 2016</h1>
</header>
<section id="personal-info-and-topskills">
<div class="topitem">
<p>
<a href="medias/thibault_betremieux_photo.jpg" target=_blank>
<img src="medias/thibault_betremieux_photo_mini.png" title="click to enlarge :) !" alt="Resume photo Thibault Bétrémieux" />
</a>
</p>
<!-- <a href.../> <Miniature/> </a> -->
<!-- target=_blank open in new link -->
</div>
<div class="topitem">
<h2>Personal information</h2>
<p><strong>About me: </strong>I am a young french expat living in Germany since two years, I speak four languages (French,English,German and Italian)</p>
<p><strong>Date of birth: </strong>24/12/1991</p>
<p><strong>Desired position: </strong>Online marketing or management in an international environment</p>
<p><strong>Place of residence:</strong> Bamberg, Bavaria (Germany)</p>
<a href="http://t.btmx.fr/contact">
<div id="contact_button">Contact me</div>
</a>
</div>
<div class="topitem">
<h2>Languages</h2>
<div id="languages">
<img src=medias/languages_450px.png alt="Languages">
</div>
</div>
<div class="topitem">
<h2>Computer skills</h2>
<h3>Microsoft Office</h3>
<ul>
<li>Word (including Mailing)</li>
<li>Excel (including charts and pivot tables)</li>
<li>PowerPoint (including masks)</li>
<li>Outlook</li>
</ul>
<h3>Internet</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>WordPress</li>
</ul>
</div>
</section>
<section id="containermain">
<div class="cmain-element">
<h2>Professional experience</h2>
<div class="float-logo-title">
<!-- is used to put the logo next to the title of work, place, and date-->
<div class="logo">
<p>
<img src="medias/aul_logo.png" alt="Logo Arbeit und Leben NRW" />
</p>
</div>
<div class="work-place-time">
<h3>Project manager (non renewable fixed-term contract)</h3>
<h4>Arbeit und Leben NRW, Düsseldorf, Germany</h4>
<p>05.2015 - 04-2016</p>
</div>
</div>
<ul>
<li>Organization and leading of Franco-German meetings for young people in vocational training – within the Program funded by the Franco-German Youth Office (OFAJ/DJFW) “Work in the partner country”</li>
<li>Animator of some of those meetings and training for the leading of intercultural exchanges</li>
<li>Development of partnerships between “Arbeit und Leben NRW”, socio-political organizations and/or vocational training centers</li>
</ul>
<div class="float-logo-title">
<div class="logo">
<p>
<img src="medias/dialoge_logo.png" alt="Logo Dialoge Sprachinstitut" />
</p>
</div>
<div class="work-place-time">
<h3>Assistant to the school direction (Master internship)</h3>
<h4>Dialoge Sprachinstitut GmbH, Lindau, Germany</h4>
<p>09.2013 - 01.2014</p>
</div>
</div>
<ul>
<li>CRM</li>
<li>Marketing: competition analysis and prospect survey research</li>
<li>Data exploitation and creation of documents for the ISO 9001 school certification</li>
<li>Various tasks for the school manager</li>
</ul>
<p>
<img src="medias/hsbc_trinkaus_logo.png" alt="HSBC Trinkaus logo" />
</p>
<!-- the logo is too large for any text to stand on its side -->
<h3>Assistant of the Team “Support to insolvency administrators” (Bachelor internship)</h3>
<h4>HSBC Trinkaus & Burkhardt AG (Corporate cients), Düsseldorf, Germany</h4>
<p>05.2012 – 08.2012</p>
<ul>
<li>Insight into equity backing principles, insolvency re-financing and trust accounts administration</li>
<li>Assistance to the team for opening trust accounts and for monitoring steps of insolvency proceedings</li>
<li>Daily queries for new insolvency cases in dedicated data bases</li>
</ul>
</div>
<div class="cmain-element">
<h2>Education</h2>
<h3>Specialization in E-Commerce and online Marketing</h3>
<h4>Conservatoire National des Arts et Métiers, Paris (Online training), France</h4>
<p>10.2014 - 04.2016</p>
<ul>
<li>“Online advertising and communication “(ESC127) - Grade: 1</li>
<li>"E-Commerce “(ESC128) - Grade: 1</li>
<li>“Collection and processing of digital marketing data “(ESC129) - Grade: 1</li>
<li>“Decision-making statistics in marketing “(ESC104) - Grade: 2,2</li>
<li>“Electronic marketing – digital marketing “(ESC123) - Grade: 1</li>
</ul>
<h3>Double degree: Master of Arts “Internationale Wirtschaftsbeziehungen” (International Economic Relations) – Grade 1,9</h3>
<h4>Albert-Ludwigs-Universität Freiburg, Freiburg im Breisgau, Germany</h4>
<p>10. 2012 - 09. 2014</p>
<p><strong>Masterarbeit: “Legislative environment of the bio-food sector”</strong> (Master’s thesis, 2014, 77p.) in German.</p>
<p>The founding texts (Codex Alimentarius and IFOAM Guidelines) and the laws of organic food; their relationships with the most famous bio private labels, internationally and in some regions and countries deeply involved in the organic food sector
(EU, USA, Switzerland, Germany, France, Austria ...).</p>
<h3>Double degree: Master of Arts „Commerce et Affaires internationales“ (International Business) – Grade 1,9</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2012 - 09. 2014</p>
<p><strong>Theoretical work for preparing my internship: “Quality and training”</strong> (Sept. 2013, 35 p.) in French.</p>
<p>EFQM (European Foundation for Quality Management) excellence model and quality management with examples relative to training. Management process of a training action, from creation to evaluation and its improvement in the context of a quality
approach.
</p>
<h3>Bachelor of Arts „Commerce et Affaires Internationales“ (International Business) – Grade 1,6</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2009 - 08.2012</p>
<p>Diploma with four languages (French, English, German, Italian)</p>
<h3>Baccalauréat</h3>
<h4>Lycée d’Arsonval, Saint Maur des Fossés</h4>
<p>06.2009</p>
<p>Scientific Baccalauréat in engineering sciences</p>
</div>
</section>
<section id="hobbies-passions">
<div id="hobbies-img">
<h2>Hobbies and passions</h2>
<p>
<img src="medias/hobbies_passions_1.png" alt="My hobbies and passions" />
</p>
<p>
<img src="medias/hobbies_passions_2.png" alt="My hobbies and passions" />
</p>
</div>
</section>
<footer>
<div id="footerbox">
<div class="footerelement">
<a href="https://linkedin.com/in/thibaultbetremieux">
<img src="medias/footer/linkedin_logo_40px.png" alt="Thibault Bétrémieux Linkedin">
</a>
</div>
<div class="footerelement">
<a href="https://www.xing.com/profile/Thibault_Betremieux">
<img src="medias/footer/xing_logo_40px.png" alt="Thibault Bétrémieux Xing">
</a>
</div>
<div class="footerelement">
<a href="http://t.btmx.fr/category/tech">
<img src="medias/footer/wp_articles_40px.png" alt="Thibault Bétrémieux Wordpress articles">
</a>
</div>
</div>
</footer>
</div>
</div>
<!--BG1 -->
</div>
<!--BG2 -->
</body>
</html>
Notes:
Perhaps this can help (it's the structure of the website):
i.stack.imgur.com/BEHxr.png
(I can post only 2 links max please copy paste and sorry...)
What I've tried so far:
for the text: redifining all font-sizes with media-queries for screens smaller than 1000px. For some reason, I have to define font-size for subitems (Box-> Item -> Subitems) because changing h2 or p etc. doesn't affect them. I have to use crazy values like 1.7em for them to look alright on mobile. But then if I'm on desktop with a reduced window (at less than 1000px), 1.7em looks huge :( !!
for the images: setting the image as background of the parent's (if I'm not mistaken) box seemed like a promising solution, however when I did that, the image was overflowing the box on the mobile :( ! I've also tried putting width=100% on parent or child but it didn't work.
other things that didn't make any sense or things I can't remember :P
I managed to resolve all problems by using the following code which gives a scale to the page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Take care :)!