Jump to content

Archived

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

FionaFell

Rearranging The Order of Elements for Display on Mobile Devices

Recommended Posts

FionaFell    0
FionaFell

Hi Team, 

 

I've created a new website using PageLines DMS, and I have a questions around the Mobile display of this website. 

 

http://imagecatchers.com.au/

 

When viewed using a laptop/desktop things are great and visitors can see the pics and the form, side by side. 

 

When being viewed on a smaller mobile device, like an iPhone things that are in two columns (wedding/pets) get a rank/order and appear in one continuous stream of content. 

 

My questions is, can I choose the order in which items appear? My client wants the text box that contains the contact form to appear first, rather than the large image galleries and testimonials. 

 

Desktop - side by side is great - perfect as it is now

Mobile - prefer the text box inc contact form to appear first, then images/galleries/testimonials

 

Can this happen? What changes do I need to make to have things arranged in this order for mobile devices?

 

Thanks for your help with this.

 

- Fiona

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI Fiona,

 

There isn't any easy way to change the order of elements in mobile view unfortunately.

However, what you can do is hide section areas using the hidden classes, which can be found here (scroll down until you seen Visibility) - http://docs.pagelines.com/tutorials/html-css-utilities

 

Unfortunately, these do not work on individual section styling classes fields. If you want to do this on individual sections you will need to use @media queries.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
FionaFell    0
FionaFell

Could I apply these to column sections?

 

So I can hide the desktops' left column on mobile devices - to hide all visuals.

 

- Fiona

Share this post


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

Hi Fiona

 

Yes you can use those classes on any element on the site. Just use the class/id for the column and apply the class to hide on the mobile :-)


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

    • 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.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
    • Queue-it
      By Queue-it+
      Hi,
      Pagelines has great extension called "Tour guide", but on the mobile the sections don't break up in a user friendly way.  I attached an image with a mobile view, where the section is set to break with text-button - image instead of text-image-button. 
      https://www.pagelines.com/product/pl-section-tourguide/
      Is there an easy way to change that sequence?
       

×