Jump to content

Archived

This topic is now archived and is closed to further replies.

blatka

Changing responsive load order

Recommended Posts

blatka    1
blatka

Hi. Just starting a site with DMS. I created a Section, inserted Two Columns, and I have a left sidebar inside the left column, and a text box inside the right column. When loading the page on mobile, the site (expectedly) shows the left column first, and then the right column. I don't want this - but would prefer to show the right column first, followed by the left column. Is there a way to make this happen?

 

http://billiejoclark.com/

 

Thanks

 

DMS 1.1.8

Wordpress 3.8.1

 


--

Bill Latka

digitalgarage_sm.png

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Bill

 

Unfortunately the way the css works for the responsive layout is that it follows the html format. So anything on the left displays first or above in the responsive layout.

 

What you could do to get the responsive layout in the order you want is a bit of css trickery.

 

Insert the left sidebar again in the desktop layout as a full width section directly below the two column layout. So you now have left sidebar, content and another sidebar underneath being pulled in via columnizer or widgetizer etc.

 

Use @media quieries css to hide the full width sidebar in the desktop layout using display:none. Then on the mobile layout set the left sidebar to display:none and the fullwidth version version to be displayed.

 

To see an example of @media queries see this thread - http://forum.pagelines.com/topic/30582-how-to-override-media-queries-in-dms-pro/

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
blatka    1
blatka

Thanks James. I'll give it a go.

B


--

Bill Latka

digitalgarage_sm.png

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
×