smart phone & tablet / font size

[Swift Ideas – Ed]

Ahh, think Kyle missed the responsive code around that, should have been:

@media only screen and (max-width: 1024px) {
.mh-tabletland #logo img {
max-height: 80px;
width: auto;
}

.mh-tabletland nav#main-navigation .menu > li > a, .mh-tabletland .header-4 nav .menu > li > a {
padding: 14px 0;
font-size: 14px;
}
}

– Ed

[sukiya]

This reply has been marked as private.

[sukiya]

Hi Ed,

since I added all those codes I checked my page with some browser tests.

so when I for example test the page with windows 7/safari 5.1 or windows/Google Chrome 23 the page looks like on a tablet. (I tested some more)

See the images attached.

so somehow there is a connection with the tablet code you gave me to a windows operating system..
I don’t get it – but this is what came out on this browser tests..

thanks a lot and best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[sukiya]

Hi Ed,

I think I got it.
on small screen sizes the page appears like on a tablet, right?

ok. thats ok.

so the questions which are still there, are:

1.) LOGO:

– I added this code to influence the logo size for the iphones:

@media only screen and (max-width: 667px) {
.mh-tabletland #logo img {
max-height: 40px;
width: auto;
}

this works, but I would like to add something which alowes the logo to adjust when I turn the screen.
right now the logo is fixed – on the phone and on the tablets also.

– and maybe its possible to center the logo?

2.) FONT SIZE OF PRODUCT NAME:
the font size is to big. I don’t know where to change the size.

3.) REVOLUTION SLIDER is cropped, but only on Iphones in the vertical mode.

thanks a lot for your advices!

best wishes,
Lisa

Attachments:

You must be logged in to view attached files.

[sukiya]

adjustment:

sorry I mean Ipad! not Iphone!

3.) REVOLUTION SLIDER is cropped, but only on Ipads in the vertical mode.

best wishes,
Lisa

[Swift Ideas – Ed]

This is the code you want for iPhone landscape. You can change the width based on the desired viewport. iPad portrait is 991, and landscape is 1024.

@media only screen and (max-width: 767px) {
.mh-tabletland #logo img {
max-height: 40px;
width: auto;
}

2) Adjust with:

@media only screen and (max-width: 767px) {
.page-heading h1 {
  font-size: 22px;
}
}

3) Change this:

@media only screen and (max-width: 767px) {
.page-content {
  margin-top: 100px!important;
}
}

to:

@media only screen and (max-width: 991px) {
.page-content {
  margin-top: 100px!important;
}
}

– Ed

[sukiya]

dear Ed!

wonderful!

thanks a lot for your help!
its working

best wishes,
Lisa

[Kyle – SUPPORT]

Thanks Ed