0
Welcome Guest! Login
0 items Join Now

responsive order positions modules

Last Post
Search Topic
    • Elliance's Avatar
    • Elliance
    • Jr. Rocketeer
    • Posts: 21
    • Thanks: 0

    responsive order positions modules

    Posted 11 years 1 month ago
    • I created multiple modules on position a and b, and ordered these through ordering > select the ordering. So you get row one showing a & b postion, then row 2 showing a & b position and so on.
      On a PC this looks fine, but on a smartphone all modules on position a appear first (a, a, a), and below that all modules on positon b appear (b, b, b). So the ordering I applied in the backend is not applied on a smartphone.

      I would like to keep the ordering a, b, a, b, a, b on a mobile device. Is this possible?
      See: www.elliance.nl/paradigm-rocketlauncher_...ne-optimalisatie-seo

      The ordering works for articles in 2 columns.
      See: www.elliance.nl/paradigm-rocketlauncher_...meinnamen-en-hosting

      Best regards,
      Cynthia
    #1085791
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: responsive order positions modules

    Posted 11 years 1 month ago
    • Elliance wrote:
      I would like to keep the ordering a, b, a, b, a, b on a mobile device. Is this possible?
      See: www.elliance.nl/paradigm-rocketlauncher_...ne-optimalisatie-seo

      Wow, I actually had to think about this one :whistle:

      YES!

      You'll have to create a duplicate set of modules. The duplicate set will appear below the module that has a lower number. We will control which modules appear on the desktop and mobile device with these module class suffix's -> hidden-desktop and hidden-phone.

      Use FireBug for Firefox or Chrome Developer Tools to help you sort out where to put the modules.
      So we're looking for this to happen:
      <div class="rt-grid-6 rt-alpha">
	<div class="rt-block box3 title5">
	<div class="rt-block box3 title5 hidden-desktop"> <!-- 2. ZOEKWOORDEN ONDERZOEK below #1 - this is a duplicate module-->
	<div class="rt-block box3 title5">
	<div class="rt-block box3 title5">
	<div class="rt-block box3 title5">
<div class="rt-grid-6 rt-omega">
	<div class="rt-block box3 title5 hidden-phone"> <!-- 2. ZOEKWOORDEN ONDERZOEK  right of #1 - this is the original module-->
	<div class="rt-block box3 title5">
	<div class="rt-block box3 title5">

      What happens here is on a desktop hidden-desktop will turn OFF the duplicate module and you will see the original to the right of "1. INTAKE SEO"

      On a mobile device hidden-phone will turn OFF the original module and the duplicate will now display below "1. INTAKE SEO"
    • Last Edit: 11 years 1 month ago by DanG.
    #1085958

Time to create page: 0.057 seconds