Alternating Features Section in Sales Page Template

Support
#1

Hi Themeco,

I want to use the Alternating Features in the Sales Page template but when this is viewed on a mobile, all the items are arranged into a column and the second item which has the text on the left, and the image on the right, is displayed with the text first. This is logical, but not from a design point of view.

This creates the order: image, text, text, image, image, text.

This is confusing for the web user.

What is required is: image, text, image, text, image, text.

Can you please help me to achieve this?

Latest X theme, with latest Cornerstone, Integrity stack.

Best regards,
Jonathan.

Sales page template!
#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi there,

great, it’s:

www.cosybox.co.uk/projects-index

If you need to access my WP, just let me know.

Regards,
Jonathan.

#4

Hey Jonathan,

Thanks for sending the url of the page. The Sale Page template is used in medium and large screen sizes in mind. The order is image - text or text - image and this is why it is also displaying in the same order in smaller screens. If you want to have a responsive way to have a image - text on large screens and display text - image, you will have to modify your columns a bit. Simply do this approach by having your column layout the same as the first row which is image - text. The only difference is that on the left column in your second row, you need to add a custom right class and also an inline css margin-right: 0; . Please the screenshot below:

This setup will make sure that on large screens, you will have image text and text image layout but on smaller screen, you will just have text image and text image.

Hope this would help. Please let us know how it goes.

#5

If I’m understanding, on large format you can have
text image
image text

but if you use the class and style you can have
text
image
text
image
on mobile? I tried and it didn’t seem to be working.
My page is http://morrison.flywheelsites.com/contact/

#6

Hi There,

Sorry for the confusion and thanks for clarifying.

Since you have your rows as

ROW 1 - text image

ROW 2 image text

They will stack as text image text. The tip provided by Rue is not related to this issue.

When I build websites with this type of layout my choice is to duplicate the second row and inverted creating a version specifically for mobile.

So you will have

ROW 1 - text image

ROW 2 image text -------> This you will select to be hidden on portrait tablet and mobile.

ROW 3 (copy of row 2) text image -------> This you will select to be hidden on desktop, laptop and landscape tablet.

You will find the options of hide based on screen width on the left Cornerstone tab if you click on the magnifying lens of your rows.

Alternatively, you can follow this guide by X Theme Tips.

Hope it help!

#7

Thanks for your help guys, will try this over the next couple of days and let you know.

#8

Hi guys.

I just tried this but it didn’t do what you said it would. Instead of getting image-text, image-text, image-text on the mobile, there is not change on the mobile and it only change on large displays. So now I have image-text, image-text on large displays but still image-text, text-image on mobiles.

I attach screen print.

I want Image-text, text-image on large displays and Image-text, image-text on mobile.

I wait to hear your advice.

Best regards,
Jonathan.

#9

Hey Jonathan,

I have check your page and I did not see that you have apply my suggestion. If you provide us access to the site, we would be happy to give you an example to have an Image-text, text-image on large displays and Image-text, image-text on mobile layouts.

Please let us know how it goes.

#10

Hi RueNel,

I applied it then removed it, because I didn’t want the client to see it wrongly. But I did attach a screen print of how it looked.

I’ll give you access using a secure note. (PS just did the secure note, but it’s showing a couple of messages before this one, just in case you miss it).

Regards,
Jonathan

#11

Hey Jonathan,

I have create a test page here: http://cosybox.co.uk/an-x-test/

Please keep in mind that you are only going to add the right class in the left column.

Hope this helps.

#12

Hey RueNel,

That’s so great of you to do this for me. It is now working. However, I still don’t know how you did it, because I’ve checked the class field for every column, row, etc. and don’t see “right” anywhere - what am I missing??

Thanks,
Jonathan.

#13

Hi again,

You only need to give right class to the left column (please see the screenshot)

Hope this helps!

#14

Hello again,

Thanks for all your help, however, I had to edit this page, and now it’s reverted to the previous problems again (ie on mobile: image-text-text-image-image-text-text-image) I need image-text-image-text-image-text.

I am sorry, but I don’t understand your image. You say I only need to give right class to the left column, but in your image the RIGHT column (ie the image) is selected.

I just tried to put “right” in the Class field for the image, but it didn’t make any difference.

I am not very knowledgable about all this, so I would really appreciate it if you could try to explain as if it were to someone with no knowledge, then I might understand it.

Best regards,
Jonathan.

#15

Hi Jonathan,

Thanks for updating the thread! If you see the source code in the screenshot above right class is given to the left column as a result on the front-end it became the right column. Now you want to structure your content like this

First Row - Image | Text
Second Row - Image | Text ( Give right class to the first (left) column )
Third Row - Image | Text
Fourth Row - Image | Text ( Give right class to the first (left) column )

Hope this helps!