Tittle CSS Customization

foosboleros · Member · Jan 11, 2018 at 11:21 pm
Copy link

Add topic to favorites
Hello, I’m using the Revelar theme and I would like to know if there’s a snippet for the following.

If you look at my latest image in my media section, you will see the front page of my website on the iPad. The tittle of the posts make the squares be uneven. Is there a snippet to make the size of those post tittles be smaller but only on the iPad version. The mobile version looks good but I just need a snippet precisely for an iPad size.

The blog I need help with is: (visible only to logged in users)
aaadude · Member · Jan 12, 2018 at 11:31 am
Copy link
Hello elcapicap,

I took a look at your site – looks like the resolution of the iPad and the length of certain titles make those squares uneven. It happens even when we resize the browser window to the iPad equivalent.

If you’re on the Premium plan (which offers CSS customization) – I suggest adding the following CSS code to make the text slightly smaller only for iPad:
```
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .blog .hentry .entry-title {
    font-size: 20px;
  }
}
```
You can change the value ’20px’ to anything you prefer. The default right now appears to be ’25px’.

With that said, certain squares will likely still end up looking uneven (especially the smaller ones!) until you make the text way too small. Perhaps there’s a proper balance somewhere? :)
thesacredpath · Member · Jan 15, 2018 at 8:28 pm
Copy link
@elcapicap, I see you have the above media query in your custom CSS, but just have a text align declaration in it. Did you try the font size adjustment suggested?

No items found.