reducing a distance between 2 elements

sacconi
(@sacconi)

2 years, 10 months ago

How can I reduce the distance between the navigation links (inside div class=”navigazione” ) and the below element, the primary container? I cant find any privious css

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

joejoe04
(@joejoe04)

2 years, 10 months ago
Hi @sacconi,

It looks like there is margin-bottom: 25px; style applied to the div element with a class of navigazione. Here is where I’m seeing applied only for desktop view (minimum of 769px width):

https://i.vgy.me/ZSWQvy.png

The style is added inline in the HTML source on line 669:

https://i.vgy.me/mcaTzn.png

I don’t see this style being applied for mobile views with smaller screen widths.

I’m not sure it’s possible for me to know how this style is being added there. It’s just there in the HTML and I don’t see any clues about what is adding it.

If you know what is adding that (seems likely it could be your theme), then you can see if there’s a way to change it using the theme or plugin settings.

Otherwise, you might try using your theme’s customizer or a plugin that allows for adding custom CSS to add styles to override this. Maybe something like this could work:
```
@media only screen and (min-width: 769px) {
  .site .navigazione {
    margin-bottom: 0px;
  }
}
```
You could set the margin to whatever value you’d prefer.

Let me know if there is any part of your question I misunderstood or did not address and I’ll be happy to help further if needed.
mariustar
(@mariustar)

2 years, 10 months ago

Hey there! I have looked into the website you provided, and it’s quite hard to understand what elements you want to adjust, could you possibly provide a screenshot with elements selected/highlighted?
Thread Starter sacconi
(@sacconi)

2 years, 10 months ago
ok, it works, I’m trying to do the same with the navigation bar under the primary, (.navigazione2), but it’s strange, I use the following selector but it doesnt act
```
@media only screen and (min-width: 769px) { .navigazione2  {width:80%;
	float:right;
	margin-top:10px
	}
	 }
```
joejoe04
(@joejoe04)

2 years, 10 months ago
Glad to hear it worked for the navigazione element!

Regarding the navigation under the primary element, I do see you added the navigazione2 CSS, but I don’t see an HTML element with that class applied, so I think that’s why it’s not working.

I think the solution to this one might be a bit more complicated because the margin in this case is being applied to each of the cards with either .page or .post classes applied as we see here:

View post on imgur.com

The reason that it’s a bit more complicated is that depending on the screen width, there may be 1, 2, or 3 of those elements in the bottom row. Above we see 2, but here in a wider screen, it’s 3:

View post on imgur.com

So we need to use come media queries to adapt the CSS based on screen width. I think something like this could work:
```
@media only screen and (min-width: 1421px) {
  main .post:nth-last-of-type(-n+3), main .page:nth-last-of-type(-n+3) {
      margin-bottom: .5em;
  }
}

@media only screen and (min-width: 701px) {
  main .post:nth-last-of-type(-n+2), main .page:nth-last-of-type(-n+2) {
      margin-bottom: .5em;
  }
}

@media only screen and (max-width: 700px) {
  main .post:last-of-type, main .page:last-of-type {
      margin-bottom: .5em;
  }
}
```
In my testing, this applied the .5em margin-bottom to the correct number of the cards depending on the width of the screen.

Let me know how it works for you and we can make some changes if needed.