Hi! My client claims the slideshow here is not responsive on her phone or her husbands, although for me when I resize the browser it resizes perfectly, and on my own phone it resizes but is too "short" the top of the images get cut off. Can you suggest the easiest way to troubleshoot this besides removing the slideshow at less than 700 pixels?
jandjjewelersocala.com/
I ran it through the validator and came back with these errors which I do not think are critical
screencast.com/t/lxlQXTT4

Hi

With the images to keep them in proportion as the screen size shrinks width wise it reduces height wise - so this behaviour is correct

As you say many people disable the slideshow for mobiles due to speed and bandwidth concerns

Can the client provide more information on the devices she is using?

Cheers
Paul

Samsung Galaxy6 and Jeff has the Iphone 5S

Sorry I should also have asked

with

"the slideshow here is not responsive on her phone or her husbands,"

in what way is it not responsive?
e.g. Is it showing scroll bars or else something along those lines

Cheers
Paul

it is showing as the large size it is on the main website and looks very odd

Have you added the viewport code via a custom code section?

Cheers
Paul

sorry ignore that I'll need to check this with anthony

Cheers
Paul

Hi,

I've just checked on chrome/android and the site is looking how it should for me.

Can you confirm the android version and browser for the samsung so we can look into it? A screenshot would be helpful as well.

I have attached some screenshots of how I see the site.

I'll ask Anthony to check on Ios, Can you please confirm the os version number?

Regards,

Rob

I just emailed the client, thanks so much for all your help, you guys are the best, I mean it!

HI Carin,

Yes I see what it should look like here on iphone 6+.
Let us know.
Thanks

client sent screenshot and it turns out she is seeing the cut off version too like the screenshot you sent, not a huge version I understood her to say,.

I can see that the header is pushing a white block over the top of the slideshow, any idea on what I should change in CSS to reduce that.

When I check in firefox with my browser simply resized, it does not do the same behavior, although the logo image is not responsive in my browser, I don't get the tall white header, screencast.com/t/P0RQQoEqnFY

It would be perfect to make logo responsive and eliminate tall white header. Thanks!!!

With the white block can you test

@media screen and (max-width:700px){
.navbar-header {height: 66px;}
}

the 700px is a bit arbitary as I'm going off the chrome browser window

I should be clear this only looking at the white space and not anything image related

I'm trimming off 20px from the header

@media screen and (max-width: 750px) {
#main .search .radio-inline,
#main .search .checkbox-inline {
display: block !important;
}
.navbar-header {

height: 46px;
}
}
I tried 66 then 46 and its still too tall, I guess its not targeting the right area?

is it changing at all with those values or just staying the same?

Cheers
Paul

no change on mobile devices, what is odd is when I resize browser I have never had this tall header issue, its only on phones, screencast.com/t/YrztawjtG6

Right - I was targetting the screenshots attached to Robs post
e.g. with the white space

The image is a different issue

If you add something like this

@media screen and (max-width:450px) {
#logo img {width: 100%;}
}

the width value again would need adjusting as required

Cheers
Paul

that fixed the logo sizing, what I just realized is that even on the PC, the header is tall, but it pushes the slideshow under it (screenshot I sent in last post), on the phones, it does not and therefore covers the slideshow, I just added this also but not helping the tall header.
@media screen and (max-width:450px) { #logo img {width: 100%;}
.navbar-header {height: 16px;
}
}

@media screen and (max-width: 750px) {
.navbar-header {height: 46px;margin-top:0px}
#logo img {margin-top:-15px}
.navbar-toggle #togglemenutext {margin-left:0}
}

This is what works for me regarding the white space and image when I test in a normal browser

Can you make sure the styling is included in the custom css file if it works in the browser

So at least, it enables it to be troubleshooted to see why it isn't applying on the particular phone / phones

Cheers
Paul