Title: reducing a distance between 2 elements
Last modified: August 24, 2023

---

# reducing a distance between 2 elements

 *  [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freducing-a-distance-between-2-elements%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [joejoe04](https://wordpress.org/support/users/joejoe04/)
 * (@joejoe04)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/#post-16998448)
 * Hi [@sacconi](https://wordpress.org/support/users/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://i0.wp.com/i.vgy.me/ZSWQvy.png?ssl=1)
 * [https://i.vgy.me/ZSWQvy.png](https://i.vgy.me/ZSWQvy.png)
 * The style is added inline in the HTML source on line 669:
 * ![](https://i0.wp.com/i.vgy.me/mcaTzn.png?ssl=1)
 * [https://i.vgy.me/mcaTzn.png](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:
 *     ```wp-block-code
       @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](https://wordpress.org/support/users/mariustar/)
 * (@mariustar)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/#post-16998469)
 * 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](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/#post-16998585)
 * 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
 *     ```wp-block-code
       @media only screen and (min-width: 769px) { .navigazione2  {width:80%;
       	float:right;
       	margin-top:10px
       	}
       	 }
       ```
   
 *  [joejoe04](https://wordpress.org/support/users/joejoe04/)
 * (@joejoe04)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/#post-16998786)
 * 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:
 * ![](https://i0.wp.com/i.imgur.com/5DCi2zd.png?ssl=1)
 * > [View post on imgur.com](https://imgur.com/5DCi2zd)
 * 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:
 * ![](https://i0.wp.com/i.imgur.com/XV5RaPz.png?ssl=1)
 * > [View post on imgur.com](https://imgur.com/XV5RaPz)
 * So we need to use come media queries to adapt the CSS based on screen width. 
   I think something like this could work:
 *     ```wp-block-code
       @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.

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

The topic ‘reducing a distance between 2 elements’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [joejoe04](https://wordpress.org/support/users/joejoe04/)
 * Last activity: [2 years, 10 months ago](https://wordpress.org/support/topic/reducing-a-distance-between-2-elements/#post-16998786)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics