Essential Grid Pagination Buttons Font Size Scaling

Support
#1

I have an EG with multiple pages shown in this screen shot: http://prntscr.com/gnz304

I would like to reduce the font size of the pagination buttons using a media query, I’ve tried the approach below but it isn’t working.

Can you help me get the right selectors and make this work?

Thanks, Bill.

//
/* Screen size from 0 to 510px, such as mobile */
@media (max-width: 510px) {
//

body .esg-pagination .esg-fgc-11
{ font-size: 10px; color: red;}

body .esg-navigationbutton .esg-filterbutton .esg-pagination-button
{ font-size: 10px; color: red;}

}

#2

Hello There,

Thanks for writing in! The code you have there is correct. It may not be working because it does not target correct element class. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#3

I added login credentials above.

It’s the home page scroll down to the grid with the pagination buttons shown here: http://prntscr.com/gqt6gl

In the back-end it’s the grid called Thinking: http://prntscr.com/gqt6wq

Thanks, Bill.

#4

Hi there,

It should be like this,

@media (max-width: 510px) {
.esg-pagination.esg-fgc-9 {
font-size: 10px !important;
color: red !important;
}
}

If you see something like this class="esg-pagination esg-fgc-9", then it means two class on the same element. Which means, your selector should be no space like this .esg-pagination.esg-fgc-9. Spaces are used only if it’s a parent-child element. Example, <div class="parent-selector"><i class="child-selector"></i></div> then that’s when you’ll use the space .parent-selector .child-selector.

Thanks!

#5

Thanks for the tip on picking a selector, but @media query isn’t solving my problem. I looked harder at the elements and the text for the pagination buttons appears to be this - I can change the colour manually in the browser but in my Skin CSS I can’t get this to work. There’s a login above where you can try this on the NL Post Skin.

@media (max-width: 510px) {
.esg-navigationbutton.esg-filterbutton.esg-pagination-button
.esg-navigationbutton.esg-filterbutton.esg-pagination-button.selected
{
font-size: 10px !important;
color: red !important;
}
}

#6

Hi there,

Ah, sorry forgot to add, when you’re targeting multiple selectors, you should use comma. Like this

@media (max-width: 510px) {
.esg-navigationbutton.esg-filterbutton.esg-pagination-button, 
.esg-navigationbutton.esg-filterbutton.esg-pagination-button.selected
{
font-size: 10px !important;
color: red !important;
}
}

Basically, the .esg-navigationbutton.esg-filterbutton.esg-pagination-button is just one element, but the other one has .selected status. Hence, you have to target different selector separated by comma. The default selector and the selected selector.

Thanks!

#7

Hello @rad - this isn’t working at all. Are you actually seeing the font and colour change when the window resizes or are you just trying to correct my CSS? If I experiment with the browser and set the CSS for the text manually, I can get the right result, but if I embed the CSS above in the Skin, or in the page CSS, nothing happens.

Could you start from scratch, and figure out how to change the styling on those pagination buttons, regardless of window size?

Thanks for helping, but so far we’ve driven a few miles without reaching the destination :wink:

#8

Hello There,

Thanks for getting back to us. Sorry if the code is not working for you. Please remove it so that we can start fresh from scratch. And then you can make use of this code instead:

@media (max-width: 510px){
  .esg-navigationbutton.esg-filterbutton.esg-pagination-button.selected,
  .minimal-light .esg-filterbutton, .minimal-light .esg-navigationbutton, 
  .minimal-light .esg-sortbutton, .minimal-light .esg-cartbutton a {
    padding: 3px 15px !important;
    font-size: 10px !important;
  }

  .esg-navigationbutton.esg-filterbutton.esg-pagination-button.selected, 
  .minimal-light .esg-filterbutton, .minimal-light .esg-navigationbutton, 
  .minimal-light .esg-sortbutton, .minimal-light .esg-cartbutton a {
    padding: 3px 15px !important;
    font-size: 10px !important;
  }

  .esg-navigationbutton.esg-filterbutton.esg-pagination-button.selected i, 
  .minimal-light .esg-filterbutton, .minimal-light .esg-navigationbutton i, 
  .minimal-light .esg-sortbutton i, .minimal-light .esg-cartbutton a i {
    font-size: 10px !important;
  }
}

Hope this helps. Please let us know how it goes.

#9

#SOLVED

Although I changed 510px to 1000px to get the right trigger point. Many thanks for your help.

#10

Glad to know things are in order now, @theotcspace. :slight_smile: