Home / Questions / 345349
Accepted
Agustin G.
Asked: 2020-04-12 18:54:06 +0800 CST 2020-04-12 18:54:06 +0800 CST

Position css text and maintain proportions in different resolutions

  • 772

I have the code that is presented below, what I want to do is that the box on the right measures the same as the first (in height), and that the texts of both are attached to bottomtheir respective box.

NOTE: This code, in my project, is inside the tag <header>, and in the browser I see the boxes of the same size. I don't understand why in the SO snippet one is bigger than the other. In my case I see them the same, but I can't adjust the text below.

WHAT I TRIED: Putting the boxes on the outside position: relativeand the one on the inside absoluta; bottom:0px, it partly works but it throws one box on top of the other and it's not what I'm looking for.

AND YES IT IS POSSIBLE: In addition to that, I would like the proportions of the distance between box and box to be maintained when changing resolution. In my case I have a connected monitor with a resolution of 1280x720 and the screen of the note in 1920x1080, and when I drag the browser from one monitor to the other the distances are not respected.

.filter-content {
    margin-left: 1vw;
    float: left;
    border: 1px solid black;
    height: 80%;
}

.logo-holder {
    display: inline;
    float: left;
    margin-left: 1vw;
    font-family: 'century';
    font-size: 2.7em;
    font-weight: 700;
    color: #bbbbbb;
    border: 1px solid black;
    height: 80%;
}
            <div class="logo-holder">
                <div style="">
                    textodellogo
                </div>
            </div>

           
            <div class="filter-content">
                <div class="gallery-filters">
                     <a href="#" style="color:#bbbbbb; margin-right: 1em;" data-filter=".nature">beauty</a>
                <a href="#" style="color:#bbbbbb" data-filter=".models">fashion</a>
</div>
            </div>

html

1 Answers

  1. Best Answer

    I consider that:

    • We can perfectly include flexbox for general accommodation (yes again with it...)
    • We wrap the 2 boxes in a general container and we give it a display: flex;with which we can move them on the horizontal axis
    • To the internal containers, that is, to the 2 boxes, we can apply:
      • A height with respect to the available viewport for example80
      • We change the alignment from horizontal to vertical, flex-directionindicating that it will now be a column type so that they are one on top of the other (the texts)
      • To move the texts to the bottom of each of its containing boxes we make use of justify-contentwith a value offlex-end

    Important

    If you don't want the 2 box container to span 100% of the page then you can make these modifications:

    • Set a widthcustom example of50vw
    • If you don't want the boxes to have a space between them you can remove the justify-contentand have them settle to the left

    EXAMPLE

        <style>
      .contenedor-general {
        display: flex;
        justify-content: space-around;
        border: 1px solid;
      }
      .logo-holder,
      .filter-content {
        border: 1px solid;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 80vh;  
      }
    </style>
    <div class="contenedor-general">
                  <div class="logo-holder">
                    <div style="">
                        textodellogo
                    </div>
                </div>
    
               
                <div class="filter-content">
                    <div class="gallery-filters">
                        <a href="#" class="gallery-filter" style="color:#bbbbbb; margin-right: 1em;" data-                          filter=".nature">beauty</a>
                        <a href="#" class="gallery-filter" style="color:#bbbbbb" data-                                              filter=".m odels">fashion</a>
                    </div>
                </div>
    </div>

    • 2