[Solved] 4 CSS boxes with text that stay 25% width even on phone? - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 30, 2014 at 10:51 am #187360

katopia
Participant

I’ve got 4 boxes with text that are generated by css on this page: http://uintools.com/blog/

They are set to be 1/4 of the page instead of a pixel-width so that they are responsive. However, when the screen gets real narrow (like on a phone), they break strangely and the text is cut off. Any suggestions?

Thanks!

October 30, 2014 at 11:03 am #187361

Paulie_D
Member

Not much you can do about that…the text can’t break…eventually the width of the text & padding and all the rest is too large to fit the wrapper.

You might want to think about media queries to make them 2+2 at a smaller screensize.

October 30, 2014 at 12:21 pm #187366

katopia
Participant

Thanks for the tip! So on the second box from the left, I’ve added the class “homebox-br”. Then updated my CSS file with the following:

`
/* Narrow View ———– */
@media (max-width : 625px) {
div.homebox-br:after{
content: ‘<br/>’;
}

}
`

But that doesn’t seem to work? Can you point me in the right direction? Thanks again!

October 30, 2014 at 12:59 pm #187367

Paulie_D
Member

You can’t put HTML in a pseudo element.

Try changing the CSS to, perhaps, clear the float on the second div at a certain point.

I would say that floats aren’t your best option here (IMO)…inline-block would be better and you can center them by adding text-align:center to the parent div.

The latter may have deeper impact but that why you should be thinking of wrapping those boxes in their own ‘row’ div. Then they’ll center all by themselves.

Also, I see that you have a lot of break tags in your source code…it looks like you’re using them for spacing elements.

That’s not what they are for…you should be using margins & / or padding for that.

I didn’t realise until now that each line in the boxes is a link…you should add a :hover state to give a clue that they do something.

October 31, 2014 at 12:39 am #187388
stefan_rakieta
Participant
Hello, i think i solved your problem.

At first, add inline-block parameter for display of .homebox, and the most important thing, wrapper using media query:
```
@media (max-width : 625px) {
  div.homebox{
    width: 40%;
  }
}
```
Also i would reccomend setting margin-bottom to those boxes, it would look better.

You can also do something like:
```
@media (max-width : 400px) {
  div.homebox{
    width: 90%;
  }
}
```
to make it much better for phones, it will put all of those boxes one under another.

So the final CSS should look like this:
```
div.homebox {
  display:inline-block;
  position:relative;
  width:20%;
  border-radius: 5px;
  float:left;
  padding:10px;
  margin-left:1%;
  margin-bottom: 10px;
  font-size: 0.7em;
  line-height: 1.5em;
    }

/* Narrow View ----------- */
@media (max-width : 700px) {
  div.homebox{
    width: 40%;
  }

}

@media (max-width : 450px) {
  div.homebox{
    width: 90%;
  }

}
```
October 31, 2014 at 9:08 am #187433

katopia
Participant

Stefan – that works BEAUTIFULLY. Thank you, you are a miracle worker!

Best to both of you… I really appreciate the help!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.