Responsive Image

Support
#1

Good afternoon,

I’m loving all the updates that have been made to the new version of X theme. But I am struggling with trying to create a responsive image that takes up the full screen. I would like to achieve what this site does: https://www.billiejeanking.com/equality/womens-sports-foundation/.

If you scroll down the page, you will see that you have an image on the right side that takes up the full screen and than on the left you have text, and this alternates.

How do I achieve this?

thanks again!

#2

Hello Carolina,

Thanks for writing in!

To achieve what you want, please edit your columns. Add all the images to the left and the text contents to the right. In alternate rows, please add a custom right-to-left class in the “Customize” tab of the row settings and then insert the following custom css in the settings tab, Settings > Custom CSS

.right-to-left{ 
    direction: rtl; 
}

.right-to-left .x-column{ 
    direction: ltr; 
}

This code will reverse the order of the columns if the row will have a custom right-to-left class.

We would loved to know if this has work for you. Thank you.

#3

It worked!!! You guys are amazing!! Thank you so much.

But to the second part of the question, how do I change the margins/padding for the text so its different on mobile, tablet and desktop?

Currently the padding on desktop is great but as I move the browser down to different device sizes the padding doesn’t work. How do I achieve this?

Is it possible to have responsive text that the paddings/margins are different on each device?

#4

Hi Carolina,

As for padding, you can use calc() value with VW units to make it responsive, Example, inspect your column and change its padding value to calc(10px + 5vw) (it’s the better value I can get from your site’s view). And you can adjust it to your liking.

Hope this helps.

#5

It worked! Thank you so much :slight_smile:

#6

You’re welcome!
We’re glad we were able to help you out.

#7

Hi Rad,
Maybe you can help me with this, I know its something that X theme can achieve but i dont know how. So with the above the padding is perfect on mobile but what i noticed is that as i expand the screen size from 1000px to 1280px or 1400px the text and images expand with it…would it be possible that after a certain breakpoint when you expand its only the background color or image and the text stays in place and does not expand with the site, such as: https://www.houstonendowment.org/

For example when i lay the page out as boxed the content in the box stays inside and does not stretch, is this possible to achieve without boxing the site? cause it should be full width

#8

Hey Carolina,

It’s possible to set a Max Width to the V2 text elements to contain them to a certain width when in large screens.

However, moving the column with the text would be a different story. Please see the screenshot below.

That would need customizing the column width and maybe use some custom media queries. This would be quite involved therefore this is not covered in our product support.

Thank you for understanding.

#9

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