Docs

[Pablo F]

Hi,

I have an Essential Grid at the home page showing the latest portfolio items. On hover these items show their info (Title, category, link). Below 600px width some titles are larger than the background. How could I make this info responsive to fit within its background in all cases?

In the next post I´ll send you the login credentials.

Thank you in advance.

[Pablo F]

This reply has been marked as private.

[Rupok]

Hi there,

You need to set proper font-size and padding from the skin editor. Kindly follow the guide here – https://community.theme.co/kb/integrated-plugins-essential-grid/

Official documentation – https://community.theme.co/kb/integrated-plugins-essential-grid/

Cheers!

[Pablo F]

Hi,

Nothing new in that guide.

As you can see in the attached capture, I´ve already set the “proper” font size for the Title (and the Category list too) in the Skin editor. The question here is that font size keeps the same in all responsive layouts because it´s only allowed one size there, how could I set different font size values for the Title and the Cat. List by browser width?

Thank you again.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:600px){
.eg-proyectos-inicio-element-16 {
    font-size: 11px !important;
}
.eg-proyectos-inicio-element-18{
 font-size: 10px !important;
}
}

Hope that helps.

[Pablo F]

Thank you, it worked!

1. Regarding this kind of CSS issues, which are the most, what tool are you using to see the current CSS classes? I´m using Firebug and after selecting the Title or the Cat. List item in the browser, I haven´t found those “eg-proyectos-inicio-element-NUMBER” classes.

2. As you can see in the attached capture, the Title overflows the div. How could I fix the line-height between the Title, the Category and the button, below 600px?

Thank you.

[Joao]

Hi There,

1- Firebug or Chrome Inspector will show that. I personally like to work more with Chrome Inspector, but for somethings FireBug is actually better, What I do is when I am having difficulties to find the right selector with Chrome Inspector I use Firebug, you could try the reverse process.

2- I cannot replicate the issue, on what device you are experiencing this?

Let us know

Thanks

[Pablo F]

Hi Joao,

1. I will check both tools deeply, than you.

2. I mean if you narrow your browser below 600px* width (the issue actually appears below 360px width because of the length if the current titles), or opening the site in a smartphone, you´ll see the large line heigh (or vertical space) between the 3 elements (Title, Category and the magnifying glass button), inside the garnet div (when hovering the portfolio item), makes some titles and buttons partial disappear at the top and the bottom.

How could the link height / vertical space between the 3 elements be changed to make it smaller? Marked in yellow in the c4.jpg capture.

Thank you again.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

@media screen and (max-width: 600px ) {
.esg-entry-cover, .esg-grid .mainul li.eg-proyectos-inicio-wrapper {
    min-height: 250px !important;
}
}

Let us know how this goes!

[Pablo F]

Hi Nabeel A,

That solution hasn´t fixed the issue. It seems the portfolio items in the grid have the same height.

As you can see in the attached captures, the vertical space between title, category and the button is too large, so the texts and the button are not shown properly.

Any solution that could work, please?

Thank you.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:767px){
.eg-proyectos-inicio-element-18.esg-fade {
    margin: 0 !important;
}
.eg-proyectos-inicio-element-12-a.esg-zoomback a {
    padding: 3px;
    font-size: 12px;
    line-height: 15px;
}
}

You can reduce font size if part of the text is still behind the grid :

.eg-proyectos-inicio-element-16 {
   font-size: 11px !important;
  line-height: 14px !important;
}

Hope that helps.

[Pablo F]

Thank you Christopher, it worked like a charm!

[Friech]

Glad we could help, feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts