/    Sign up×
Community /Pin to ProfileBookmark

Different section view on mobile devices.

Copy linkTweet thisAlerts:
Oct 05.2021

Hi all,

In the 3rd section of my site http://solutionsarray.com/ i am looking for two different front end visual outcomes.

  • – One for desktop and large tablets.

  • – One for mobile devices.

    • In this Desktop view i have a row with two modules “left, right”.
    https://prnt.sc/1uxej9f

    On mobile i want them to stack on top of each other differently like in this mobile screenshot https://prnt.sc/1uxenjz
    that i took from this site https://www.solutionspal.com/ – based on the 3rd section.

    If you shrink the homepage horizontally it changes to mobile view on the desktop browser; and you will see the items stacking differently.

    On my section it ends up looking like this.
    https://prnt.sc/1uxeuq3

    It’s probably related with the CSS floating positions, even if they are absolute or fixed.
    Is it what it comes down to; CSS rules?

    to post a comment

    2 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @SempervivumOct 06.2021 — >If you shrink the homepage horizontally it changes to mobile view on the desktop browser; and you will see the items stacking differently.

    This can be achieved easily by using flexlayout and the property `flex-direction`. You can switch from the desktop/tablet view to the mobile view by use of a media query.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4
    Copy linkTweet thisAlerts:
    @estipendioOct 08.2021 — With some simple CSS can easily show and hide different content on mobile devices and on desktops regardless of how your website was created.

    Yes, this method will also work on ANY Beaver Builder or Dynamik Website Builder site… but follow those methods which use some of the built in features of those platforms.

    So…. you created a website using some random WordPress theme or Joomla or Drupal etc… and you want to show and hide different content on mobile and desktop devices! No problem! To do that we just need to use some magic CSS!
    ×

    Success!

    Help @49duv spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.21,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...