Jump to content

Archived

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

jennajonesdesign

Not Loving the Responsiveness...

Recommended Posts

jennajonesdesign+    15
jennajonesdesign

Hi!

 

I am just finishing up a large site with DMS. Overall I am happy with it, but it really does not scale well. I realize that responsiveness is important, but in this case it just makes a mess of things. 

 

I remember PageLines had an option to turn off responsivness? I feel like with this site I need some help with making the responsive layout work better, or I just need to turn it off all together. 

 

Can anyone tell em how to do either of these things?

 

Feedback welcome!!

http://www.healthylifestylesmt.com/

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

ok sorry. I am reading the other posts about responsiveness. Would still love input on how to keep the responsive ON but make it work better. 

Share this post


Link to post
Share on other sites
Andrew    201
Andrew

Over the next few months, you can expect some more ground work to be done in DMS to help you with responsive tweaks. I realize it can be hard. 

 

In order to help you, we'd need to see specifics. We're also considering adding a 'disable responsive' feature back in, but we want to encourage best practice design, which IMO is responsive these days.

  • Like 2

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

Thanks for your response! Just a suggestion as you guys develop.... In other themes that I have used, once the screen is small enough to switch to responsive the elements all switch to centered. That seems to make a much more graceful transition. In my case it just looks really weird to move the layout blocks around and have them stay left or right aligned. 

 

Here is an example of one that works great. If the responsive features moved around a little better in DMS it would solve it for me. 

 

http://www.yellowstonevalleywoman.com/

 

**I am a complete novice!! I only know the really basic stuff here, so there is probably a way to do all of this that I don't know about. Sorry for my inexperience. I like the idea of sticking to best practices and staying with responsive. I know I personally would just need some more tutorials on how to do that well. 

 

Thanks DMS Team!

 

Jenna

Share this post


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

Hey Jenna

 

Simon pasted a hook to disable the responsiveness in DMS, you can find on this thread http://forum.pagelines.com/topic/31053-dms-111-disable-mobile-view/?hl=dms


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
jamieg270+    13
jamieg270

Hi Jenna,

 

This may help you, though it will require you to experiment with CSS and Media Calls.

 

You can adjust the CSS for Responsive design by making adjustments using Media Calls. Either adjusting the already existing media Calls and associated CSS and/or adding your own. In my opinion, having looked at your site, I think you would probably want to add some padding/margin so that your text does not go right to the edge of the browser, and reorder some of the elements in the block above the menu.

 

I'm not sure what to do about the image you have set as a background image part way down. Maybe remove it when the width of the browser gets too small and insert an image that only appears, float left, in the text on mobile view perhaps. That will take a little trial and error on your part to get right...

 

You can do this by examining the CSS when the responsive CSS is activated. The CSS code responsible for the Responsive layout would be contained in a media call which starts with '@media' and specifies the pixel width that the new CSS within the media call will be activated. See below:

@media (max-width: 767px) {
  .pl_area_wrap {
  padding: 40px 10px 40px 10px;
  }
}

This CSS rule is activated as soon as the browser window is 767px or less in width. (incidentally you can do the reverse by changing the 'max-width' to min-width', your CSS rule will then be applied to everything when the browser window is 767px and wider).

 

I haven't tested the above code (so it may need some more specificity), but if I remember correctly this will add some padding to the elements where you are currently getting text butt right up to the edge of the browser left and right. You can use the same methodology to select the text and make it centred if you wish.

 

Just remember that everything within the media call brackets will be applied when the browser width reaches the width specified, and remember to close the brackets for the media call otherwise it will probably cause a LESS compile error.

 

You can paste the above code into your LESS custom code field in the visual browser. However best practice would be to put it in the .less file in a Child Theme if you're using one. For experimenting you might find it easier in the Custom Less field in the visual browser as you can then get direct feedback on what you're adjustments are doing.

 

Hope that helps,

 

Jamie

  • Like 1

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Jamie - thank you for this helpful information 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

Jaime! That is so helpful. I really appreciate your time. I will have to do some more research to fully understand everything you are referencing, but I am so glad to have a solid place to start. Awesome. 

 

James - I did find that hook and use it. Helped some, but didn't solve everything. 

 

Great input guys!

 

Jenna

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

ok. One more update.... After Jamie's post I decided to dig in and I am to happy to say I got it mostly worked out! (feeling super proud!) Everything got cleaned up quite a bit by adding some padding to sections and removing some sections from mobile all together.

 

**With that said, for future revisions it would be amazing if each section had a little button that said "hide for devices" Until then, for anyone else that wants to do that here is what I used that worked. 

 

@media screen and (max-width: 767px) {
body .pl-area .pl-section.classy-nothing .pl-section-pad  {
    visibility: hidden;
    display: none;
  }
}
 @media screen and (max-width: 767px) {
#pl_area1789b0 {
    visibility: hidden;
    display: none;
  }
}
 
Last thing I am stuck on. I can't seem to change the background for my feature section. Here is what I am using now. Any suggestions? http://www.healthylifestylesmt.com/
 
@media screen and (max-width: 767px) {
#pl_areahgja99{
  }
}
 
Thanks!
 
Jenna

Share this post


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

Hi Jenna,

 

Try this, you weren't targeting the correct class where the image is being applied to.

 

https://gist.github.com/Dannyholt/d4959f38ae8f1c0661f4


Please search our forums, before posting!

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 
       
    • 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
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
    • Anthony King
      By Anthony King+
      I have to say that I like the Layout and the Template based sections. Some of them are really impressive.
      One of the things that I would like to request though is the possibility of being able to dynamically rearrange the layout.
      An example of what I am talking about is take the Agency Section. It's current layout starts with the
      Splash Module then the Portfolio Module then the Service Module and so on and so forth.
      What would be great is if we were able to move these modules around. I.e have the Service Module first
      then maybe the Splash, and then the portfolio.
       
×