• 0

Not Loving the Responsiveness...


Question

Posted · Report post

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

9 answers to this question

  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jamie - thank you for this helpful information 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Hi Jenna,

 

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

 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now