Archived

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

  • 0

Decker Decker on Mobile


Question

Posted · Report post

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

22 answers to this question

Posted · Report post

Thanks for your help.

This one is resolved.

 

Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Awesome! Well, just let me know if there's anything else I can do!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Did you get this figured out?

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Nick,

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

 

Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

Hey Carlton,

Nope I sure haven't, but glad to hear it's worked out.

Share this post


Link to post
Share on other sites

Posted · Report post

No no you would just need to reduce the padding.

 

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

Share this post


Link to post
Share on other sites