- This topic is empty.
-
AuthorPosts
-
October 30, 2014 at 10:51 am #187360katopiaParticipant
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 #187361Paulie_DMemberNot 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 #187366katopiaParticipantThanks 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 #187367Paulie_DMemberYou 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 addingtext-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 #187388stefan_rakietaParticipantHello, 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 #187433katopiaParticipantStefan – that works BEAUTIFULLY. Thank you, you are a miracle worker!
Best to both of you… I really appreciate the help!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.