CODEWITHSUNDEEP
htmlcss
user11065207
user11065207

Reputation:

Centering (vertical and horizontal) and spacing span elements inside of a div element despite media query

I started working on this recently; See the part where it says "contact work about". Using my desktop it looks centered (1920 x 1080), but when I use this on my laptop it isn't centered and leans more towards the right. What can I do in order to make this centered and each separate element on the same line with some space between each of them?

Heres the HTML part

<div id="nav-base">
  <span id="contact">Contact</span>
  <span id="work">Work</span>
  <span id="about">About</span>
</div>

Here is the CSS part that affects those <span> elements (I'm using media queries for responsive design)

@media (min-width: 1281px) { 
.... /*Rest of the code for the site*/

/*
All values are the same for each media query
*/
#nav-base>span {
  color: rgb(197, 197, 197);
  margin: 0;
  padding: 0;
  margin-left: 375px;
  font-size: 36px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 90px;
}

Upvotes: 0

Views: 48

Answers (3)

Thiago E S
Thiago E S

Reputation: 75

The problem lies in the margin-left: 375px; - If you want it to be responsive the margin shouldn't be fixed.

Upvotes: 1

Jackson
Jackson

Reputation: 911

I would suggest to learn css grids, this helps a lot with styling things like this https://css-tricks.com/snippets/css/complete-guide-grid/.

Look at the code below for a css grids way of doing this easily.

 #nav-base {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
 }
 
 #nav-base>span {
    color: rgb(197, 197, 197);
    margin: 0;
    padding: 0;
    font-size: 36px;
    display: block;
    line-height: 90px;
    place-self: center;
  }
<div id="nav-base">
  <span id="contact">Contact</span>
  <span id="work">Work</span>
  <span id="about">About</span>
</div>

Upvotes: 0

Douglas R. Santos
Douglas R. Santos

Reputation: 139

I suggest to use flex on the div and remove the left margin from the span items and add a minor one like:

#nav-base {
  display: flex;
  justify-content: center
  ...
}
#nav-base > span {
  margin: 0 20px;
  ...
}

Upvotes: 2

Related Questions