Add Css Style to a Viewport from a specific page in the visual studio bootstrap

Asked

Viewed 31 times

0

I’m new to CSS and I’m studying some elements.

When Creating an ASP.NET CORE MVC project with Visual Studio 2017, automatically all content is already placed within a body-content that keeps content centralized. (At least that’s what I understood)

On a specific page, I’m using a Viewport, where I’d like the entire page length to be filled in by it, without changing body-content on the other pages...

I tried to do it this way:

.name-page . body-content{ width: 100%; }

I tried to do the opposite: .body-content . name-page{ width: 100%; }

however the result I managed was to change the CSS for all pages, but I repeat, I would like to change only to a specific page.

Thank you.

PAGE HTML:

    <section class="conteudo-cadastro">
        <div class="content">

        </div>
    </section>

CSS:

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.conteudo-cadastro {
    margin-top: 4px;
    height: 100vh;
    background-color: #747640;
}
css viewport

  • Good afternoon @L Thomaz, what happens is that body-content is probably inheriting a size that is not 100% from the viewport, just when you put width 100% in body-content it will occupy the size of his father. check who is the father of body-content and see what the width of it is. Post the css and some html to look at, if possible.

  • Hello @Andersonmendes, first thank you for the interest in responding, how can I identify who is the parent element of body content?

  • Probably going to be the body tag or html, is html just that? The . body-content class is in body?

  • HTML is just that because I haven’t added any content yet, I’m trying to understand the elements. As for body-content being inside the body, if this happens it is implicitly in some way done by the visual studio itself, because on the page itself, it is started with Section, exactly the way it is.

  • Your page view is similar to this one CODEPEN PAGE and you want to remove these blank spaces from the side?

  • @Andersonmendes Exactly, I want to remove the white spaces from the sides, that’s exactly it. I want my viewport to fill 100% of the space laterally.

Show 1 more comment

1 answer

0


To solve your problem it is quite simple to remove the margins of the body adding margin: 0 to the body and removing the padding from the .body-content, in reply I just commented the padding left and right but you should remove them, your conteudo-cadastro will occupy 100% of the viewport, but will affect the other pages, the size of the Section you will have to define.

Padding is internal distance relative to its border or internal distance from the content relative to the border. Ref

Margin is the external distance of its edges from other components. Ref

body {
    padding-top: 50px;
    padding-bottom: 20px;
    margin: 0; 
}

.body-content {
    //padding-left: 15px;
    //padding-right: 15px;
}

.conteudo-cadastro {
    margin-top: 4px;
    height: 100vh;
    background-color: #747640;
}
<div class="body-content">
        <section class="conteudo-cadastro">
                <div class="content">
      
                </div>
         </section>
   </div>

Browser other questions tagged css viewport

You are not signed in. Login or sign up in order to post.