Alternating content image and text

alphasolutions · August 2018

Hi there,

I want to have alternating sections of content where there is an image and then text beside it like below on desktop

Image | Text Here

Text Here| Image

Image| Text Here

However when looking at it on mobile it stacks as the following - which is how it is layout wise (based off desktop) but visually it is not right for the user

Image

Text

Image

I would prefer the image to appear on top for each section on mobile with the text underneath

Image

Text

Image

Text

Is there any way to do this in Muffin Builder apart from doing a separate mobile only section that doesnt display on desktop?

Pablo · August 2018

Hi,

You can do it with using simple HTML/CSS + our shortcodes in column items.

I will paste you a tutorial I made for other user to show you how to operate it.

Shortcodes:http://themes.muffingroup.com/be/splash/#shortcodes
Example:

First, let's edit our collumn and put an Icon for top,
below this let's type Contact us!
Customize this code a little with HTML/CSS tags and let's do a break with divider.
Change text-align to center too http://prntscr.com/jy23tq

But that's still not to much, let's write something there and set the color for this column.
http://prntscr.com/jy2437

And the result is:http://prntscr.com/jy249n

If you have some questions, feel free to ask.
Thanks

alphasolutions · August 2018

Hi there,

This is not anything like what I asked - thats just an icon inside a columm - very similar to an icon box.

I am looking to have columns alternating - but how they display on mobile is the issue as it currently follows the desktop layout and formatting but this is not how it should be displayed to the user.

I have attached a screenshot to show on desktop how it looks and then on mobile how I would like it to look

https://imgur.com/a/XZtDnve - desktop how it currently is using an image and column of text

https://imgur.com/a/feeX1kK - mobile layout with the same content - but this is not how it should be for the viewer (it is correct following the layout of desktop ) but reading it there should be an image then text..another image then text..it makes no sense to see the text first on mobile..on desktop it is part of the design.

https://imgur.com/a/D8KM9Lv - this is how it should be on mobile..alternating between image..then text..then image..then text.

Is that possible to do - keeping the layout on desktop so it alternates on each row..but on mobile laying them out correctly so it reads the best way..

So specifically the order it stacks on mobile.

I know I could do a section thats only visible on mobile but trying to avoid that.

Thanks

Pablo · August 2018

Yes, this is like icon box, but you can do this thing you want to make it in this column item.

This tutorial was just a example, how to manage making things in column.

There is no other way, because responsive script is working automaticly and we cannot modify it.

Please, use this only visible on mobile option, it will be the best option.

Thanks.

Alternating content image and text

Comments