I have a header that works perfectly fine in its own html file and I have a product details page that also is fine on its own. When I add the header to the product page it messes up entirely and pushes the header out of the way, placing part of the product details to the right of the header.
I tried using inspect element and found no padding or magins that would be doing this and adding a margin or padding does not fix the issue.
I assume it's a problem with the product page as inspect element does highlight that section of the page when I was troubleshooting.
Any help would be amazing!
some of the product html (https://i.stack.imgur.com/tsGDT.png)](https://i.stack.imgur.com/tsGDT.png)
PRODUCT HTML:
@import url(https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;800;900&display=swap);
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a{
text-decoration: none;
}
p{
color: #9ba0a3;
margin-top: 10px;
}
.btn{
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header{
width: 100%;
height: 80px;
display: block;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
/* background-color: red; */
}
.logo-container{
height: 100%;
display: table;
float: left;
}
.logo-container img{
max-width: 60px;
max-height: 60px;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.navigation{
float: right;
height: 100%;
}
.navigation a{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>fret - Guitars for the People!</title>
<link rel="stylesheet" type="text/css" href="./gibson.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
</head>
<body>
<div >
<div >
<div >
<img src="fretlogo.png"/>
</div>
<ul >
<a href="index.html"><li>Home</li></a>
<a href="index.html#section-1.5"><li>Products</li></a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley"><li>About</li></a>
<a href="index.html"><li>Login</li></a>
</ul>
</div>
</div>
<div single-product>
<div >
<div >
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
id="ProductImg">
<div >
<div >
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180543.jpg" width="100%"
>
</div>
<div >
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180503.jpg" width="100%"
>
</div>
<div >
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
>
</div>
<div >
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180534.jpg" width="100%"
>
</div>
</div>
</div>
<div >
<p>Home / Gibson G-200</p>
<h1>Gibson G-200</h1>
<h4>€1,990</h4>
<select>
<option>Select Quantity</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5 </option>
</select>
<ul >
<li><i ></i></li>
<li><i ></i></li>
<li><i ></i></li>
<li><i ></i></li>
<li><i ></i></li>
</ul>
<a href="" > Add to Cart</a>
<h3>Product Details</h3>
<br>
<p>
<ul>
<li>Body Shape: J-200 with cutaway</li>
<li>Top: solid Sitka spruce</li>
<li>Neck: utile</li>
<li>Profile: advanced response</li>
<li>Dovetail neck construction</li>
<li>Fretboard: striped ebony</li>
<li>Fretboard inlays: G-collection single bars</li>
<li>Nut width 43,80 mm (1,725")</li>
<li>Scale: 648 mm (25,5")</li>
<li>Made in Bozeman, USA</li>
</ul>
</p>
</div>
</div>
</div>
</body>
</html>PRODUCT CSS:
product page on its own (https://i.stack.imgur.com/Vnd9J.png)](https://i.stack.imgur.com/Vnd9J.png)
header on its own (https://i.stack.imgur.com/eQE3g.png)](https://i.stack.imgur.com/eQE3g.png)
the mix of both the header and the product details (https://i.stack.imgur.com/9y2t1.png)](https://i.stack.imgur.com/9y2t1.png)
I tried looking for disruptive padding and margins
I tried adding padding and margins to the smallcontainer and row in css
CodePudding user response：
If your header and your product page are wrapped into a .row, the behavior is pretty normal (a row is made to manage its child vertically). https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
You should remove it or change it to a .col.
.col{
display:flex;
flex-flow:column;
}
CodePudding user response：
I believe you might have a float problem. You are using floats but I don't see and clearfixes for them. This could create such behaviour.
In general I recommend using float only to wrap text around another element and otherwise get rid of it. You should use flexbox more often.
As I couldn't reconstruct your problem with the code given I just removed the float: full codepen here
adapted css:
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product {
margin-top: 80px;
}
.small-img-row {
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2 {
/* CAREFUL: was 20 only! if it's not 0, don't forget to add a unit! */
padding: 20px;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select {
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4 {
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a {
text-decoration: none;
}
p {
color: #9ba0a3;
margin-top: 10px;
}
.btn {
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header {
display: block;
width: 100%;
height: 80px;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header {
display: flex; /*changed*/
justify-content: space-between;
align-items: center;
width: 1000px;
height: 100%;
margin: 0 auto;
/* background-color: red; */
}
/*changed*/
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 60px;
max-height: 60px;
/* display: table-cell;
padding: 10px;
vertical-align: middle; */
}
/*changed*/
.navigation {
display: flex;
height: 100%;
/* float: right; */
}
/*changed*/
.navigation a {
height: 100%;
display: table;
/* float: left; */
/* padding: 0px 20px; */
}
/*added*/
.navigation a a {
margin-left: 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
I marked the changed parts with a comment. You also had an other error, a missing unit for a padding.
If your problem is not fixed with this check out JohnSs answer as you might have a container around it with display: flex; and as he stated the incorrect flex-direction.