iphone surface

[sukiya]

hi everybody,

I would like to change the mobile phone surface like so:
(see the attachment)

– remove the search icon
– put the shopping icon on the left side of the logo
– place the logo in the center
– and if possible reduce the size of the logo

is this possible without influencing the user surface of the computer?

thanks again!
best wishes,
Lisa

[Mohammad – SUPPORT]

Hi,
If you provide specific page url so i can give any possible solution to you.
Thanks 🙂
With Best Regards
Swift Ideas

[sukiya]

hi mohammed,

the page is:

http://www.eshop.sukiya.ch

thanks a lot!

Lisa

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:

@media only screen and (max-width: 479px) {
#logo a:first-child{width:50% !important;margin-left:50%}
#logo a.mobile-cart-link{float: left;margin-right: 10px;margin-top: -56px;width: 100%;}
#logo a.mobile-search-link{display:none !important;}
}

Thanks 🙂
With Best Regards
Swift Ideas

[sukiya]

hi Mohammed,

thanks for your answer.

I tried it it out. so please look into the attached files.

LOGO:
first I was using the css code like you recommended it.
the logo was not in the center. now I changed the second line like so:

#logo a:first-child{width:50% !important;margin-left:25%}

now the logo on the mobile phone is in the center.
although I don’t know if this works also for an ipad?

SHOPPING ICON:
the problem is that the invisible field for the shopping icon is as large as you can see it in the attached image.
so when I press the menu the shopping bag appears.

SEARCH ICON:
the search is still there.

thanks a lot for helping me in this case!

best wishes,
Lisa

[Mohammad – SUPPORT]

Hi,
Please attach screenshots correctly.
Thanks 🙂
With Best Regards
Swift Ideas

[sukiya]

I think the attachment did not work.
so I tried it again…

[Mohammad – SUPPORT]

Hi,
If you provide wordpress admin login detail so i can debug to fix the issue very soon .
Thanks 🙂
With Best Regards
Swift Ideas

[sukiya]

hi mohammad,

is it possible that you tell me what to do?
let me try it once again.

or is it to complicate?

best wishes,
Lisa

[Mohammad – SUPPORT]

Hi,
What should i tell you again ?
Thanks 🙂
With Best Regards
Swift Ideas

[sukiya]

hi Mohammad,

you told me to send you my admin login so that you can fix the problem with the iphone surface.

if its not so difficult I would like to try it myself – if you tell me what to do.

thanks a lot!

best wishes,
Lisa

[Swift Ideas – Ed]

Hi there,

This CSS should do it for you – apologies for the code being wrong from Mohammad.

@media only screen and (max-width: 767px) {
#logo a:first-child{
width:90%!important;
position: absolute;
}
#logo a.mobile-cart-link {
float: left!important;
}
#logo a.mobile-search-link{
display:none!important;
}
}

– Ed

[sukiya]

hi Ed,

thanks for your help!

I tried it like you said; I changed the third lined like so:
width:50%!important; – because I want the logo to be a bit smaller.

so it looks good – but the logo should be in the center and not on the left side.(see the attachment)
how can I change this?

thanks for your help!
best wishes,
Lisa

[Rui Guerreiro – SUPPORT]

Hi,

Since you changed Ed suggestion, please replace it by the code bellow.
I also added a rule because of the logo was over the slider.

@media only screen and (max-width: 767px) {
#logo a:first-child{
width:50%!important;
margin-left: 20%;
position: absolute;
}
#logo a.mobile-cart-link {
float: left!important;
}
#logo a.mobile-search-link{
display:none!important;
}
.page-content {
margin-top: 80px;
}
}

Best Regards,
Rui

[sukiya]

Hi Rui,

thank you!
now it looks much better!
two things:
if you take a look at the attached images sukiya_menu and sukiya_product:

– the menu should be a little bit more down – now its nearly on the top of the page.
– the product gallery should be a little bit more up.
there is a shadow under the image
the prices are a bit to narrow

thanks a lot for your help!

best wishes,
Lisa