Alternating content image and text

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

  • 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
  • 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





  • 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.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.