Jump to content


Photo
Decker

Decker on Mobile

mobile decker mobile


This topic has been archived. This means that you cannot reply to this topic.
22 replies to this topic

#1 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 18 March 2013 - 07:20 PM

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



#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 18 March 2013 - 11:56 PM

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



#3 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 19 March 2013 - 09:25 PM

Can you view this?

 

https://www.diigo.co...kbl/twm2?size=o



#4 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 19 March 2013 - 09:30 PM

Let's try this:

 

http://i45.tinypic.com/2vtvccx.jpg



#5 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 20 March 2013 - 01:06 PM

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.



#6 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 20 March 2013 - 04:15 PM

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

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

 

Thanks



#7 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 20 March 2013 - 04:16 PM

.... and live link is

http://flagstonesearchmarketing.com

 

What I was seeing was on an Android device in Chrome.



#8 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 21 March 2013 - 09:37 AM

Hey Nick,

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

 

Thanks



#9 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 21 March 2013 - 01:21 PM

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



#10 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 23 March 2013 - 05:11 AM

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%; }

#11 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 23 March 2013 - 12:36 PM

No no you would just need to reduce the padding.

 

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



#12 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 23 March 2013 - 10:36 PM

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



#13 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 23 March 2013 - 11:42 PM

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.



#14 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 24 March 2013 - 02:33 AM

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.



#15 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 24 March 2013 - 01:04 PM

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.



#16 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 28 March 2013 - 01:45 PM

Did you get this figured out?



#17 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 28 March 2013 - 08:31 PM

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.



#18 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 28 March 2013 - 08:50 PM

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



#19 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 29 March 2013 - 12:31 AM

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

 

https://www.diigo.co...mage/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??



#20 carlton†

carlton

    Advanced Member

  • DMS Subscriber†
  • 56 posts

Posted 29 March 2013 - 05:00 PM

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.