как мне избавиться от белого поля в правой части моего сайта? - PullRequest
Новая
       13

как мне избавиться от белого поля в правой части моего сайта?

0 голосов
/ 27 мая 2020

Я должен разработать веб-сайт за html для сдачи экзамена. Я имел дело с белой рамкой в ​​правой части страницы моего веб-сайта, и я не знаю, в чем причина. Я тоже новичок, поэтому не знаю, с чего начать поиски или что делаю не так. хотя я действительно не хочу провалить этот класс: - / Если бы кто-нибудь мог быстро взглянуть, я был бы очень признателен!

вот мой html:

image

и это мой css: 

/**
* My main CSS file
*/


* {
    margin: 0;
    padding: 0;

}

.container-fluid {
    margin: 0;
    padding: 0;
    margin-right: 0;
    padding-right: 0;

}


body {

    background-color: var(--color-white);
}

#backgroundimage {

    object-fit: cover;
    height: 586px;
    width: 100%;

}

.background {
    position: absolute;
    margin-top: -1%;
    width: 100vw;
    height: 972px;

    background-image: var(--color-gradient);
}

.topbar {
    width: 100vw;
    height: 36.5px;
    background-color: var(--color-topbar);
    position: relative;


}

.navigation {
    margin-left: 7%;
    width: 430px;
    margin-top: -1.5px;
}

#welkom {

    font-family: Bahnschrift Regular;
    font-size: 10.5pt;
    margin-left: -12%;
    margin-right: 7%;




}

#winkelwagen {

    font-family: Bahnschrift Regular;
    font-size: 12pt;
    color: var(--color-white);




}


.row.top {
    height: 36.5px;
}

#user {


    padding: 11px 15px 11px;
    margin-left: 6%;
    margin-right: 5%;
    border-left: solid 0.1pt black;
    border-right: solid 0.1pt black
}

#shoppingcart {
    position: relative;
    margin-left: 20px;
    height: 16px;
    width: 16px;
}

#l {
    color: var(--color-white)
}

h1 {


    font-family: bahnschrift regular;
    font-size: 48pt;
    font-weight: 100;
    color: var(--color-darkred);
    margin-left: -3%
}

.searchbar {
    display: flex;
    align-items: center;
    margin-top: 100px;

    justify-content: flex-end;

}

#searchbar {
    text-align: center;
    outline: none;

    height: 33px;
    font-family: Calibri light;
    font-size: 20pt;
    position: absolute;
    border: solid 0.2pt var(--color-gray);
    border-radius: 3px;
    margin-left: -20px;


}

#searchicon {
    position: absolute;
    margin-left: -25px;



    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;

    border-left: solid 1pt var(--color-gray);

}



.selectionlink {

    justify-content: center;
    font-family: Bahnschrift Regular;
    text-decoration: none;
    color: var(--color-darkred);
    padding-right: 3.35%;
    font-size: 1.45vw;
    font-weight: 600;
}



.topselection {

    margin-top: 5%;
    width: 100%;

}

.border {
    border-bottom: solid 1pt var(--color-gray);
    width: 100%;
}

#sale {
    position: relative;
    color: white;
    font-family: Bahnschrift Regular;
    font-size: 1.40vw;
    text-decoration: none;


}

#klantenservice {
    position: relative;
    color: var(--color-beige);
    text-decoration: none;
    padding: 0.30%;
    background-color: white;
    font-family: Bahnschrift Regular;
    font-size: 1.40vw;
    margin-left: 2%;


}


.selectionpicture {
    width: 100%;
    height: 198px;
    text-align: center;

    margin-right: 20px;
    margin-bottom: 45px;
    margin-top: 45px;
}

.picturelink {
    width: 100%;
    height: 100%;
    border-radius: 4pt;
    object-fit: cover;

}



h2 {

    margin-top: -50px;
    font-family: acumin-pro, sans-serif;
    font-style: normal;
    font-weight: 200;
    color: white;
    font-size: 2.5vw;



}

.bold {
    font-family: acumin-pro, sans-serif;
    font-style: bold;
    color: white;
    font-weight: 700;
}

.main {
    height: 1300px;
}

h3 {
    margin-top: 40vh;
    font-family: Bahnschrift Regular;
    font-style: bold;
    text-align: center;
    font-size: 2.5vw;
    border-bottom: solid 1pt var(--color-gray);
    padding-bottom: 22px;
    margin-bottom: 122px;

}


.secondsection{
    margin-top: -4vh;
}

.voordelen2 {
    width: 100%;
    height: 100%;



}
.afbeeldingrechts{
    height: 100%;
}

.afbeeldinglinks{
    height: 100%;
}



.p2 {
    font-family: Bahnschrift Regular;
    font-size: 125%;
    font-style: bold;
    font-weight: 600;

}

.p3 {

    font-family: Bahnschrift Regular;
    font-size: 100%;
    font-style: bold;
    font-weight: 800;

}

#geldterug {
    font-family: bahnschrift Regular;
    font-size: 112%;
    font-weight: 100;
}

.rechts {
    text-align: center;


}

.links {
    text-align: center;
}

footer {
    height: 467px;
    width: 100vw;
    background-color: var(--color-topbar);
    position: relative;
}

li {
    list-style-type: none;
    font-family: calibri regular;
    font-size: 16px;
    font-weight: 200;
}


h4 {
    font-family: Bahnschrift condensed;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 50px;

}

.p4 {

    font-family: calibri regular;
    font-size: 16px;
    font-weight: 200;

}

.socialmedia {
    font-size: 25px;
}

.followus {
    text-align: center;
}

.social {
    margin-bottom: -10px;
}

#nieuwsbrief {

    background-color: transparent;
    height: 31px;
    width: 176px;
    border: solid 0.2pt black;
    outline: none;
    position: absolute;
    font-family: calibri light;
    font-size: 14px;


}

#nieuwsbrief::placeholder {
    color: black;
    padding-left: 5px;
}



.chevronright {
    color: white;
    position: relative;
    margin-left: 150px;
    padding: 7.5px;
    background-color: black;
    width: 31px;
    text-align: center;
}


.nav-toggler {
    display: none;
}

есть также некоторые медиа-запросы, которые больше не подходят для этого тела ... ха-ха

Спасибо!

Ответы [ 3 ]

1 голос
/ 27 мая 2020

«Быстрое исправление»

Я быстро взглянул на ваш CSS и изменил следующие свойства, чтобы посмотреть, достаточно ли этого. Мне это нравится. 

body {

    background-color: var(--color-white);
    margin-left: 5%;
    margin-right: 5%;

    /*Overflow hiding is a big no-no*/
    overflow-x:hidden;

}

.border {
    display: flex;
    border-bottom: solid 1pt var(--color-gray);
    width: 100%;
}

h1 {
    font-family: bahnschrift regular;
    font-size: 48pt;
    font-weight: 100;
    color: var(--color-darkred);
}

p{
    width: 90%;
}

Добавьте их в конец файла CSS для «Быстрого исправления»

Я также изучаю HTML и CSS, для разработки таких макетов рассмотрите возможность использования Flex Box, который является хорошим учебным ресурсом по этой ссылке. https://youtu.be/_vEjcueG3zY

Вы также можете использовать эту книгу в качестве справочника https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189

CSS -Overflow https://www.w3schools.com/cssref/pr_pos_overflow.asp

Ваш CSS выглядит очень "загроможденным" флексбоксом, это поможет вам, по крайней мере, упростить макет.

1 голос
/ 27 мая 2020

Короче говоря, используйте width: 100% для замены width: 100vw в вашем styles.css.

Reason:

Длина окна просмотра в процентах зависит от размера начальный содержащий блок. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются. Однако предполагается, что любые полосы прокрутки не существуют .

do c: https://drafts.csswg.org/css-values-3/#viewport -relative-lengths

0 голосов
/ 27 мая 2020

Измените 

<div class="container-fluid">

на 

<div class="container-fluid px-0">

container-fluid будет иметь отступ (слева и справа от 15 пикселей), удалите его с помощью px-0 class

...