Bootstrap alignment Grid doesnt work

Bootstrap alignment Grid doesnt work
0

#1

Hey guys :slight_smile:

I’m having problems using the bootstrap grid for a resposive site. The grid works very well in a large landscape but in a smaller one i have this problem:

The Code:
[https://codepen.io/ericko/pen/ZvYmav]

Thank you guys :slight_smile:


#2

What do you want to happen on smaller devices? Also, can you post a link to your current code, so we can take a look?


#3

That text should be right under the logo, without that huge gap. :confused:

The current code:


#4

You can try changing the media query to:

@media (max-width: 458px) {
  .head img {
    width: 2em;
  }

  .about_text {
    font-size: 0.8em;
  }
}

and then changing the about us html to:

<div class="about_us">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4 text-center">
        <img  src="https://c1.staticflickr.com/5/4559/38526716166_c409b115ac_o.png">
      </div>
      
      <div class="col-lg-8 about_text">
        We are a design studio that in addition to being passionate about what we do, we are passionate about every project that passes through our hands and we are only satisfied when our team work meets all expectations and in some projects, whenever possible, we try exceeds them.(NEEDS CORRETION)
      </div>
    </div>
  </div>
</div>

I personally would remove the following from the media query, because I think it makes the font-size harder to read on mobile devices. I only left it in there above, because you had it attached to your p element, which was not really needed.

  .about_text {
    font-size: 0.8em;
  }

#5

Is media query JavaScript stuff?


#6

No, it is pure CSS. See documentation for more information.


#7

media queries is part of CSS

MDN Docs

Edit: a minute too late… @randelldawson has you covered above…


#8

so…

@media print{}

…is what the page would look like if I print it? LIke when I click print-preview what I see is because of the CSS from that media query? Do I have the right idea?