How to adapt text to screen resolution size?

Support
#1

I’ve been having an issue making my site look good on both a desktop view and a tablet view. The issue comes down to the text size and image size of the about part of my home page.

When I increase the size of my text it looks great from a desktop view of 1200+ PX. But from a tablet view the text is way too big and causes the image to look small in comparison with gaps above and below. (see uploaded image).

If I decrease the size of the text it looks great from a tablet view, but in the desktop view there is a huge gap of white below the text which makes it look unprofessional.

It’s frustrating me. I can either make my website look great on tablets, or great on desktops. But not both. Is there a way to adapt the text size based on the screen resolution of the device viewing the webpage?

#2

This checkered look is what I want it to look like in both the desktop and tablet view. With the text perfectly filling the space beside the images.

#3

I based this look off of the below linked website. At the bottom of their homepage it looks like the images crop themselves on devices with smaller resolution so that the text and images maintain their spacing. Would that be better than adapting the text size on different screen resolutions? I think both could work. I’m not sure what would be easier or what would be possible with X Theme.

#4

Hi there,

Thanks for writing in.

With this setup, it’s best to use slider since it scales down the elements for each device. Even if you successfully apply the responsive text, it will not be readable.With that long paragraph, forcing it to that very small box will make it too tiny. But if you wish to make it resize based on screen, then simply add this to your text element’s Inline CSS input field unxer customize section.

font-size: calc( 5px + 2vw);

You may change it depending on your preference. The 5px is based size, and 2vw is the responsive value.

Thanks!

#5

Yeah, I see what you mean about the text not scaling correctly even with the responsive application. Is there a way to change the images instead? At http://impacttheory.com/ it looks like they responsively crop the sides of the images to make it fit. I have room for my images to be cropped on the sides like that.

#6

I tried using a Hero slider, but it was very hard to achieve the look that I wanted. Especially because I love how the images and text stack on mobile. The slider stays horizontal which wasn’t working as well as the responsive vertical orientation that I was having normally.

#7

In this case, you will need to setup 2 sections. One will only show on desktop and one will only show in mobile screens. This way, you can design for both screens specifically.

If you use your image as a background, it will be cropped because of the difference of the columns aspect ratio to your image. When in desktop, the column’s aspect ratio is wide or in landscape mode and in mobile, it’s tall or in portrait mode while your image’s aspect ratio is fixed.

If this does not help, please give details of what you want your section to look exactly on desktop and on mobile. Then, give us WP Admin access in a Secure Note.

Thanks.

#8

I didn’t realize I could hide sections based on either desktop or mobile. I made 2 sections and they work perfectly now. Thank you!

#9

You’re welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.