Jump to content


Photo
Decker

Decker on Mobile

mobile decker mobile

Best Answer carlton , 01 April 2013 - 01:15 PM

Thanks for your help.

This one is resolved.

 

Thanks

Go to the full post


  • Please log in to reply
22 replies to this topic

#1 carlton

carlton

    Advanced Member

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

Posted 19 March 2013 - 09:25 PM

Can you view this?

 

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



#4 carlton

carlton

    Advanced Member

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

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
  • Country: Country Flag

Posted 28 March 2013 - 01:45 PM

Did you get this figured out?



#17 carlton

carlton

    Advanced Member

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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
  • Country: Country Flag

Posted 28 March 2013 - 08:50 PM

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



#19 carlton

carlton

    Advanced Member

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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

  • Members

  • 56 posts
  • LocationAlabama
  • Country: Country Flag

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.







Also tagged with one or more of these keywords: Decker, mobile, decker mobile