Difficulties with responsiveness to complex layout

Question

Difficulties with responsiveness to complex layout

Navigation

#1 by (0 votes)

1

Good afternoon, all good?

I have a question, if it gives a lot of work, do not even have to do it, just give me a light, because I think I'm not doing this layout the best way to stay responsive and I'm having a lot of problems at work.

The layout is basically the one below:

I'musingbootstrap4andI'mhavingtroublemakingthisfloatingbluesquare,couldyoutellmeifI'mdoingitright,orcanyouimprovetomakeitmoresemantic?Thankyou.

Followmyhtmlandcss:

<sectionid=oquebuscamos><divclass="row sessao1">
                <div class="container-bloco col-md-4">
                    <h1>O que<br> busca<br>mos</h1>
                    <div class="bloco">
                    </div>
                </div>
                <div class="descricao col-md-4 offset-md-8" style="padding-left:0">

                    <div class="col-md-6">
                        <p>Gerar oportunidades para que pessoas e organizações conquistem seus objetivos com satisfação e
                            felicidade.
                        </p>
                    </div>
                </div>
                <div class="saiba col-md-3 offset-md-7">
                    <button type="button" class="btn btn-primary">SAIBA ONDE ATUAMOS</button>
                </div>
                <div class="conteudo col-md-8 offset-md-2">
                    <img src="images/oquebuscamos.png">
                </div>
            </div>
    </section>

CSS:

    .conteudo {
    margin-top: 2em;
}

.quadrado1 {
    position: absolute;
    margin-top: 6vw;
    margin-left: 4vw;
}

.container-bloco {
    width: 100%;
    height: 65%;
    margin-top: 8%;
    margin-left: 5%;
    position: absolute;
    z-index: 999;
}

.bloco {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background-color: #1268c2;
}

.container-bloco h1 {
    padding-top: 50px;
    padding-left: 5em;
    padding-right: 0;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 4em;
    text-transform: uppercase;
    z-index: 99;
    text-align: right;
    width: 100%;
    line-height: 1.1em;
}

.descricao {
    width: 100%;
    position: absolute;
    z-index: 99;
    margin-top: 20%;
    margin-right: 10%;
    border-bottom: 4px solid #3f7cbc;
}

.descricao p {
    color: #fff;
    font-size: 1em;
    z-index: 99;
    text-align: right;
    font-family: Myriad Pro;
}

.saiba {
    position: absolute;
    margin-top: 30%;
    z-index: 99;
    text-align: center;
}

.saiba button {
    background-color: transparent;
    border: 1px solid #fff;
    font-family: Myriad Pro;
    letter-spacing: 1px;
    padding-top: 2%;
    width: 100%;
    height: 50px;
    border-radius: 0;
}

.saiba button:hover {
    background-color: #1268c2;
    color: #fff;
}

If someone has advanced knowledge of hmtl and css and can give me an idea, or help me with something, I deeply appreciate it.

html css twitter-bootstrap layout responsivo

asked by anonymous 09.09.2018 / 19:12

1 answer

Javascript - Remove the click event of a button Downloading data from a paged table

score 0 · Accepted Answer

I took a look at your code and had various structure details in HTML and CSS too, many redundant, and unnecessary classes. Some of them even like padding you can use the native classes of Bootstrap nor need to make in the hand ...

Since there were many details I will not describe them all. But basically I put a overflow-x in body so I can put some elements extrapolating the screen size, but not generate the horizontal scroll bar in the window. This was needed because of the blue box in H1 and the blue line in P , in both I created a ::after element to create the blue elements.

See the code as it was. You still need to handle the responsiveness to adjust on small screens ok!

OBS: Display as "All Page" to see the result better!

body {
    overflow-x: hidden;
}
.bg {
    background-image: url(http://unsplash.it/400/250);
    background-size: cover;
    background-repeat: no-repeat;
}
.saiba button {
    background-color: transparent;
    border: 1px solid #fff;
    font-family: Myriad Pro;
    letter-spacing: 1px;
    padding-top: 2%;
    width: 100%;
    height: 50px;
    border-radius: 0;
}

.saiba button:hover {
    background-color: #1268c2;
    color: #fff;
}
.saiba p {
color: #fff;
font-size: 1em;
text-align: right;
font-family: Myriad Pro;
position: relative;
}
.saiba p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 1000px;
    height: 3px;
    background-color: #1268c2;
}
.container-bloco h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 4em;
    text-transform: uppercase;
    line-height: 1.1em;
    position: relative;
    z-index: 1;
}
.container-bloco h1::after {
    content: "";
    position: absolute;
    top: -20%;
    right: 50px;
    width: 1000px;
    height: 140%;
    background-color: rgba(18, 104, 194, 0.5);
    z-index: -1;
}

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />


<div class="container bg">
    <div class="row">
        <div class="col-md-6 text-right pr-5 py-5 container-bloco">
            <h1>O que<br> busca<br>mos</h1>
        </div>
        <div class="col-md-3 offset-md-3 py-5 align-self-end saiba">
            <p class="text-center text-md-right">Gerar oportunidades para que pessoas e organizações conquistem seus objetivos com satisfação e felicidade.</p>
            <button type="button" class="btn btn-primary">SAIBA ONDE ATUAMOS</button>
        </div>
    </div>
</div>