Jump to content
Sign in to follow this  
carlton

Decker on Mobile

Recommended Posts

carlton    3
carlton

I love this Section!

Only one small problem. I changed the width to 1000, which looks great on desktop.

However, on the mobile version, it creates some dead space between the photo and the Decker headline (sorry, I don't have a screencap).

Is this because I have monkeyed with the width? Do I need to return to the default 600 x 400 in order to get display perfect on all devices?

 

Thanks

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Hmm, weird. I checked out the demo on my iPhone and seems to work well. Do you have a live link?


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Unfortunately I can't do much with just a screenshot. It seems though that the height ya, it's at a fixed height. You can change that to accomodate your image. I believe there are 2 items set to a height of 400px. I'm away from the house right now but can take a look when I get back. Either that or use a larger image, or one with a 400px height.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
carlton    3
carlton

I actually do have all of these sized at 940 x 400.

Please do let me know how/where I can make adjustments.

 

Thanks

Share this post


Link to post
Share on other sites
carlton    3
carlton

Hey Nick,

Just seeing if there is a way I can adjust this.

 

Thanks

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

This was really designed to fit a certain aspect ratio image. Your's is a lot smaller, so you'll need to manually adjust the padding on .decker-slider.

 

Learning how to use Inspector will get you a very long way. 

http://screencast.com/t/vikoGDUmll

 

So if you adjust the padding-bottom to something that will fit your image it'll be perfect. This is CSS so you'll need to put it in the Custom CSS box in PageLines.

http://screencast.com/t/fbsHMrwt8Cia

 

Nick


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
carlton    3
carlton

So I should use this in custom css? Change the max width? Sorry, I am trying to learn how to manipulate CSS....bear with me. ;-) @media (max-width: 767px) { .decker-accordion { height: auto; position: static; width: 100%; max-width: 100%; }

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

No no you would just need to reduce the padding.

 

.decker-slider{padding-bottom:42%;}


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
carlton    3
carlton

D'oh.

 

Pasted this into Custom.

 

decker-slider {padding-bottom: 1%;}

 

It's not making a difference on mobile. I'm not complaining because it looks great on desktop, but would be nice to have the same look on mobile.

 

Thanks

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Check out my message above. 42%. You have 1%. If not 42% try something less than that if you want a specific look. I'm going to look into re-doing this section at some point.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
carlton    3
carlton

Yup, I tried 42% the first time.

I'm still seeing the same thing on mobile - the white gutter space below the photo.

It's okay though; I like the way it looks too much on desktop to use 600 x 400 just for mobile compatibility.

An update sounds great.

Thanks for the help.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

So if you adjust the padding-bottom to something that will fit your image it'll be perfect. This is CSS so you'll need to put it in the Custom CSS box in PageLines.

http://screencast.com/t/fbsHMrwt8Cia

 

Try using !important. You can see in my screenshot above that it's working.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
carlton    3
carlton

No, still getting same result.

 

This is what I have in Custom:

 

section-decker div.decker-slider {658px x 276px !important ;}

 

should it be different? I'm a content guy, not much of a coder (obviously), so talk to me like I'm a 5th grader. lolz

 

Thanks for following up.

Share this post


Link to post
Share on other sites
carlton    3
carlton

That produces the following on desktop (though perfect on mobile display):

 

https://www.diigo.com/item/image/3nkbl/e3kx

 

You said this for a certain aspect ratio, so does that mean if I want wide screen, the image should be 900 x 700??

Share this post


Link to post
Share on other sites
carlton    3
carlton

Did you change anything on your end?

The photos are now not displaying on mobile, which is fine with me, it looks cleaner and more consistent.

Share this post


Link to post
Share on other sites
carlton    3
carlton

Thanks for your help.

This one is resolved.

 

Thanks

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

Sign in to follow this  

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

×