there’s some mistake in that code I made, "leaving the page up"

Asked

Viewed 24 times

1

the code itself, that’s right, but when I put it in one, it looks like the content goes up, leaving the following components up

need to figure out the error:

.thumb {
    width:33%;
    height:auto;
    text-align:center;
    float:left;
}
@media screen and (max-width:800px) {
    .thumb {
        float: none;
        text-align:center;
        vertical-align:middle;
        width: 100%;
        width:auto;
    }
}

and I use it this way to keep it aligned:

<div class="thumb">
    <img src="images/image" alt="" title=""/>
    <h3>TESTE</h3>
    <p>TESTE</p>
</div>

there is jsFiddle as requested: new jsFiddle

at first it seems to be all right, but when you resize the jsFiddle screen, you can see the error

I really need to figure this out!! someone can help me??

html css
  • 1

    Can you do a jsFiddle with an example? and explain what is failing and with what resolution...

  • is the following, the code is right, as you can see. But if I add something else under the code, it goes "up". What might be the error??

  • It looks good on jsFiddle. What doesn’t work for you?

  • Sergio, I made a new example to demonstrate the error. If you resize the page, you can see that it is black where it is white. How can I fix this??

  • And what is the correct one? the horizontal or vertical one?

  • You have to resize the vertical line to be wider than 800px, as in css @media

  • I know that. And it gives different results. My question is: which of the black parts is correct? when it’s less than 800px or more than 800px

  • the part less than 800px. is correct as shown here: https://jsfiddle.net/Leb6xom4/2/

  • Is that how you want it? https://jsfiddle.net/4rsr99sj/

  • Yes, that’s right!! Thank you very much!! I didn’t even know I could use inline-block. Put as an answer there, please

Show 5 more comments

1 answer

1


Instead of float: left; and float: none; you can use display: block; and display: inline-block; and avoid the side effects that the float generates.

Would look like this: https://jsfiddle.net/4rsr99sj/

.thumb {
    width: 33%;
    height: auto;
    text-align: center;
    float: left;
}

@media screen and (max-width:800px) {
    .thumb {
        float: none;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        width: auto;
    }
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.