Responsive Text Size, Image Size, and Layout in Elementor

Question

I have Three separate questions. I am using the Hello Theme. I am using Canvas. The three questions below are all related.

Question 1 – Text Editor Size by VW

I am having issues with the Text Editor sizing by VW. Let me start by my goal:

I would like the text to resize as I resize my desktop browser window. For example, if I make the desktop browser window narrow, I would like the font size to get smaller but keep its paragraph style.

I thought the best way to do this was to size the text by VW so that the text font is proportional to the view width. However, When I make the width of the browser as small as possible, the text font jumps back up to it’s original size and the column becomes narrow and long.

How can I fix this?

Link for reference: https://ibb.co/1nM7MXB

Question 2 – Image Size

If I am using an image that 500 pixels wide x 600 pixels tall. How can I set the widget so that it does NOT exceed the 500 pixels width, but is also responsive when the desktop browser window shrinks? I used the “Maximum Width” option, but the maximum width does NOT correlate with the actual maximum width of the image, it always shows the image larger.

Question 3 - Layout

I am trying to achieve the layout below (see link below)

Link: https://ibb.co/ykqTYgM

I am going to use a single column, full height (fit to screen) with a custom absolute position for the texts on the left and right. I want this layout to be responsive so that when the desktop browser window shrinks in size, so does the text, but with the text remaining in the same place.

I truly appreciate any and all of your help!

Answer 1

In terms of text size, use clamps. First, you need to know the width of your site. On a page (in Elementor) click the hamburger menu at the top left of the widgets panel - Site Settings - Layout. At the top you'll see Content Width. For this example, let's say it's 1300px

Next, on your page, select the text in Desktop size screen (normal) and set the px size of your text. For this example, let's say 25px

Then, go to Mobile layout, and set the size of text you want there. For this example, let's say 16px

So you now have these three values:1300px width, 25px maximum font size, 16px minimum font size.

Then use this calculator: https://clamp.font-size.app/

In Minimum Viewort, put in 360, Maximum Viewport = 1300 Minimum Font Size = 16, Maximum Font Size = 25

You'll now get the following calculation: font-size: clamp(1rem, 0.7846rem + 0.9574vw, 1.5625rem);

Delete the first part so you get: clamp(1rem, 0.7846rem + 0.9574vw, 1.5625rem);

In your Text editor, on Desktop, change the size value from px to the Pencil icon and paste the above clamp calculation in. Go to Mobile view, in the text editor, change the size value from px to the Pencil icon and delete any size shown there (16) and the clamp calculation will automatically appear.

(Whatever size you set in Desktop, it will trickle down through all screen sizes - laptop, tablet, mobile).

Your text is now fully responsive according to screen size.

Answer 2

As you mentioned you are using elementor, You can do it easily. Let me help you to solve this: Solution for question 1 : In Elementor you can set the font size for each device. For Example, you are Using 14 PX for desktop and didn't set the font size for tablet and mobile, So on mobile and tablet, it will show 14px as well. Set the mode to the tablet. Then go to Style > Typography > Size. Set the size for the tablet. Do this for mobile as well.

Solution for question 2 : Try using custom size for the image and it will not increase the width.

Solution for Question 3: There are so many ways to achieve this. Use Z-Index to achieve this. First, create 2 columns with picture. then below create a blank section with the text and set alignment to center then use a negative margin to adapt it.