sellerdeck 2016 and iphone 6/7 logo resizing

[mythandmagic]

Hi guys,

Hope you can help, I have set up a website which is fine on everything but in iphone 6/7 the logo is too wide at the top.

I have tried to find it in css but I cant seem to change anything that adjusts it.

Its fine on the iphone 5, seems with the screen being that little bit wider its not resizing the logo down.

Can someone please advise?

[malbro]

Hi guys,

Hope you can help, I have set up a website www.sumpsandpumpsdirect.co.uk which is fine on everything but in iphone 6/7 the logo is too wide at the top.

I have tried to find it in css but I cant seem to change anything that adjusts it.

Its fine on the iphone 5, seems with the screen being that little bit wider its not resizing the logo down.

Can someone please advise?

Hi
The problem is that your logo is not resizing correctly for screen widths from 505 down to 340 pixels at which point it starts correcting the size again. This is controlled in the actinic css file on the web site which is generated from the current Stylesheet button on the Design Tab. The ipad stuff is near the bottom off actinic.css but a lot of the media control that makes the pages responsive is actually held in other css files that are included via the layout 'Core Style'. You can access these through the Design Library on the Layotus tab under Theme Stylesheets.

[mythandmagic]

Thanks for the reply Malbro..

I'm looking in the layouts but cant find anything in the core styles.

However in the responsive CSS part 2 I can see lines for example;

@media screen and (max-width:500px) {
.logo {width:60%;}
.logo img {width:100%; height:auto;}

I'm not too clued up about CSS, but is this something I should be changing, if so to what?

there is quite a few of these

[malbro]

Thanks for the reply Malbro..

I'm looking in the layouts but cant find anything in the core styles.

However in the responsive CSS part 2 I can see lines for example;

@media screen and (max-width:500px) {
.logo {width:60%;}
.logo img {width:100%; height:auto;}

I'm not too clued up about CSS, but is this something I should be changing, if so to what?

there is quite a few of these

That one is the one that sets the image width for screens less than 500px, you can alter the 60% and reduce it to suit and also add similar sections working at other widths to control the size of the logo. The hard part with responsive design is catering for all the different devices that may be used, or may come on the market in future, and also with a system like SellerDeck the different sizes of logo that can be used by different sites

If this is an 'out of the packet' SellerDeck site then it is possible to give more help but if it is a custom design then you would need to talk with the original web designer as the code is unlikely to be standard.

[mythandmagic]

Thanks for you help malbro. its much appreciated

This is the standard smart responsive theme if that helps 16.0.2

[malbro]

Thanks for you help malbro. its much appreciated

This is the standard smart responsive theme if that helps 16.0.2

The standard theme is designed to work with a logo image that is 310px wide and the media settings work correctly for that width of image, your logo is 500px wide hence the standard settings have a problem when the width of the viewing window is reduced as proportions no longer work. You will note from previous posts on this thread that the problems you describe lie with viewing windows in the range between the standard logo width and the width of your logo. However if you compare the out of the box site with yours it is clear that the the larger logo is actualy causing problems in the layout all the way down from around 1400px, The standard page does not need to change the postion of the header components until 1200px and is much smoother in operation, the search box is resizing after this and on the standard page is keeping the layout in place whereas your page has lost the cohesiveness of the layout.

You can see what I mean by comparing your site with this page http://cartplugin.toddesigns.com/, it is an out of the box page, and reducing the width of your browser slowly to see how the two pages react differently to reduction in width.

To correct this you could simply change you logo size to a width of 310px at which point you will find it works as intended, or you will need to go through the same excercise the original web designer did and sort out the media statements to meet your new requirements.

[mythandmagic]

Malbro,

Thank you very much for your time and advice. Fantastic help!

I have resized the image to 310px and works a dream.

perfect!

[malbro]

Malbro,

Thank you very much for your time and advice. Fantastic help!

I have resized the image to 310px and works a dream.

perfect!

Glad that helped