Support Center Visit Demo License manager Buy @ envato

Alternating content image and text

alphasolutionsalphasolutions
edited August 2018 in BeBuilder
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
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?


Comments

  • PabloPablo
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • alphasolutionsalphasolutions
    edited 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





  • PabloPablo
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.