Issue with unwanted Scroll bar
Question
The problem I am having is that I have a margin or a container somewhere that is creating an unwanted scroll bar horizontally on the bottom of my webpages. I am using my contact page since it is my page with the least amount of content, even though I am having the issue across all of my other 5 pages linked on this website. I know it will be something simple and would love an extra pair of eyes who could maybe shed some light onto where the issue is. Thanks in advance. Please let me know if there is anything else I can provide for further details. Thanks in advance.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<link href="css/style.css" rel="stylesheet" type="text/css"><link rel="preconnect"
href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap" rel="stylesheet">
</head>
<div class="IMGLogo">
<img src="images/RJL photography_Logo.svg" alt="LOGO" width="370.026" height="65.492" ></div>
<div id="wrapper">
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
-->
<ul id="menu">
<a href="index.html"><li>Home</li></a>
<a href="projects.html"><li>Projects</li></a>
<a href="lofts.html"><li>Lofts</li></a>
<a href="balcony.html"><li>Balcony/Rooftop</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</div>
</nav>
</div>
<div>
<main>
<br>
<br><h1>Contact</h1>
<p class="pbox"> The folks at RJL Photography are eager to make your moments last a lifetime. Inquire
below.</p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<div class="card">
<img src="images/New/Contact/RyanBio.JPG" alt="Ryan Bio" style="width:100%">
<h1>Ryan Luber</h1>
<p class="title">CEO & Founder, RJL Photography</p>
<p>Frederick, MD</p>
<p>443-222-3333</p>
<p>RJLPhoto@RJLP.COM</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
<br>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="pnumber">Phone Number</label>
<input type="text"
id="pnumber"
name="phonenumber"
placeholder="Your phone number..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Description of your desired Photoshoot."
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</main>
<!--wrapper--></div>
<footer>© RJLPhotography 2020 </footer>
</html>
wrapper {
margin: auto;
width: 100%;
}
body {
align-content: center;
margin-top: 0;
margin-left: 30;
margin-bottom: 0;
}
article {
background-image: url("../images/BAR.svg");
width: 82%;
padding: 20px;
position: relative;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-family: 'Lora', serif;
}
h2 {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
margin-left: -200px;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
body {
margin: 20px;
position: relative;
/* make it look decent enough */
background: white;
color: gray;
}
.IMGLogo {
margin: 0 0 0 0;
width: 370.026px;
height: 65.492px;
position: absolute;
left: 40px;
top: -40px;
}
p.pbox {
margin-left: 400px;
margin-right: 400px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
img {
/*display: block;
object-fit:cover;
*/
width: 80%;
height: 90%;
margin-top: 80px;
margin-right: 80px;
margin-left: 0;
margin-bottom: 80px;
max-width: 1000px;
border-radius: 8px;
}
.center {
/*display: block;*/
margin-left: auto;
margin-right: auto;
width: 76%;
}
main {
padding-left: 65px;
position: static;
margin-top: 40px;
width: 100%;
}
#BARcenter {
width: 60%;
height: 100%;
position: relative;
top: -100px;
left: 60px;
z-index: 50;
}
#BARcenter img {
width: 40%;
height: 40%;
}
#menuToggle {
display: block;
position: relative;
top: 130px;
left: 30px;
z-index: 100;
-webkit-user-select: none;
user-select: none;
right: auto;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5)!important;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: black;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.4;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: gray;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
footer {
text-align: center;
}
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 0px;
/* Place the button at the bottom of the page */
left: 30px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: black;
/* Set a background color */
color: white;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 25px;
/* Some padding */
border-radius: 10px;
/* Rounded corners */
font-size: 18px;
/* Increase font size */
}
#myBtn:hover {
background-color: #555;
/* Add a dark-grey background on hover */
}
1 answers
solution1
0 2020-12-06 21:58:24
On your main tag remove padding-left: 65px;
and on your MenuToggle remove left: 30px;
That fixes your issue of having an horizontal scroll bar.
You will then have to have a play about with your hamburger menu and contact text. Try using position absolute rather than relative on your menuToggle.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unwanted horizontal scroll bar
unwanted horizontal scroll bar in fluid layout
Horizontal unwanted scroll bar from CSS
Unwanted horizontal scroll bar using bootstrap 3
Scroll bar issue with iframe
Scroll bar issue in CSS
horizontal scroll bar issue
MB issue of scroll bar
unwanted navigation bar resizing issue (CSS and HTML)
overflow-x: auto creates unwanted vertical scroll-bar
Related Tags