CODEWITHSUNDEEP
htmlcsscss-position
M Smith
M Smith

Reputation: 430

How can I stop these buttons overlapping?

I've only know the very basics of HTML and CSS for the last 3 days, so I'm sure that this is a very basic question (which will likely require a simple answer).

I've tried making a website about mathematics as a revision exercise (www.mathematicool.net). On a full width browser, the buttons on the homepage look okay. However, as the browser becomes narrower, and the buttons become spread over multiple rows, they seem to overlap in the vertical direction. In the CSS for this page, I've tried adding padding-top and padding-bottom to the .button class, but this just stretches the buttons, rather than spreading them out. I've also tried using margin-top and margin-bottom, but neither of these seem to do anything.

What do I need to do?

Upvotes: 2

Views: 2859

Answers (3)

The Beast
The Beast

Reputation: 1

You can try clear: both; Or if you were floating them you can try float: none;

Upvotes: 1

Jayem
Jayem

Reputation: 215

Additionally, you can use media queries to add CSS specific to the current size of the browser window that the page is in. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I looked into your website www.mathematicool.net. And this should work nicely:

@media (max-width: 700px) {
  .button {
    display: block;
    margin: 5px;
  }
}

Makes it look like:

mathematicool example

Upvotes: 2

mrdommyg
mrdommyg

Reputation: 101

Margin will not work well on inline elements such as <a>. Try setting display: inline-block on the links, and then you can set a margin, say margin: 5px.

Upvotes: 2

Related Questions