Docs

[Josh Hayles]

Hi there! Can you see the attached images and let me know why my text areas aren’t aligned correctly when using the ipad mini? I thought everything was supposed to adapt to the different screen sizes?

http://www.geniushomeowners.com

[Rupok]

Hi there,

Thanks for writing in! It’s because you have set larger font-size for the content that’s inheriting and affecting other contents. You can use media query to adjust the font-size for smaller screens.
Let’s add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.x-counter .number-wrap {
  font-size: 1.75em;
}

.x-counter .text-above, .x-counter .text-below {
  font-size: 15px;
}

.x-btn, .button, [type="submit"] {
  font-size: 12px;
}

}

You can adjust more elements within media query if needed. Also you can create another instance of media query with another screen range.

Hope this makes sense.

Cheers!

[Josh Hayles]

I added the code but it hasn’t changed anything.

[Rad]

Looks okay on the iPad mini. Would you mind clearing your browser cache?

Thanks!

[Josh Hayles]

I cleared the cache and it still looks bad. See attached image.

[Rad]

Hi there,

Please add this as well,

@media ( max-width: 979px ) {
.x-feature-box-title {
font-size: 1.3em;
}
}

The button can’t be aligned horizontally due to content size.

Cheers!

[Josh Hayles]

I cleared everything after entering the new code and it still looks the same. See attached.

[Rupok]

Hi there,

Kindly read the reply (#post-997590) carefully and you will get it. The suggested code was for the counters part and the button on your given screenshot page. I can see the button is now perfect for iPad as shown on your screenshot. So what’s not working here? It’s working as expected. Also check the page that contains counters and you will see that’s working as well.

If you need to decrease any other font (as shown on your screenshot) then add CSS within media query or point us the element if you can’t figure out the selector. It looks okay to me so I didn’t add more CSS.

Hope this makes sense.

[Josh Hayles]

I don’t understand how you’re saying the buttons are perfect. They aren’t aligned properly with the rest of the text boxes. Some are lower than others. I have created the descriptions to have a certain number of lines so that they align the same when viewed online. But the ipad mini is the only device that is trying to keep all four columns in view, like a desktop computer. I feel like the site should resize everything for the mini so that it maybe only has 2 columns visible at one time, instead of four. Do you know what I mean? What am I not understanding?

[Rupok]

Hi there,

Thanks for updating. It always won’t work as you think rather as it supposed to work. You might have used certain number of lines but you can’t really measure certain number of lines since it depends on the words length. For example, first and second column have longer words which is breaking to new line where the last column is different.

So it looks fine to me and that’s why I said it’s perfect as it supposed to be like that and it’s pretty usual.

Hope this makes sense.

[Josh Hayles]

I see. You’re right, the counters look better. I might try some “gaps” and hide them on big devices to even out the horizontal discrepancy on the home page. Thanks for your help.

[Rahul]

You’re welcome!

[Author]

Posts