Hello @sacconi ,
To create some space on the left for the pagination (.wp-pagenavi) on screens up to 769px wide, you can use the following CSS with the appropriate media query:
@media only screen and (max-width: 769px) {
.wp-pagenavi {
margin-left: 5px;
}
}
This will add a 5px left margin to the pagination on mobile devices.
For the breadcrumbs text, you’ll need to target the specific CSS class or element used for your breadcrumbs and apply a similar margin to match the other top elements.
Let me know if this helps!
Can you elaborate on what you mean by it doesn’t work? I copied that style and saw the padding added on screens below 769px in width, so it seems to be working for me.
I’m just adding this in browser, so my guess is if you aren’t seeing it your styles are getting added before the theme/plugin that is setting them therefore it is overwriting. A few options to fix this could be:
- Increase your specificity to have them apply
- Use !important in your style (I tend to stay away from this, but it is an option)
- Change the ordering. Doing this would depend on how the styles get added. If it uses the wp_enqueue_style() function, you can add a dependency to ensure it loads after another stylesheet or change the priority of the action to make it run later
Hi @sacconi
You need to be more specific with your queries here. If you’re trying to add more margin or padding to your pagination, you can target the following CSS:
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
This adjusts the spacing around each pagination link. Additionally, since you’re using the WP-PageNavi plugin, you can find further support at: https://wordpress.org/support/plugin/wp-pagenavi/
