long name breaks responsive layout / issues on ipad portrait mode

[bza]

Responsive Issues:

A long site-name (logo header deactivated) breaks the responsive layout on mobile (iPhone 5)
Also the products don’t arrange properly in iPad portrait mode.
https://www.dropbox.com/sc/7t21awrc5pt0qft/AAC0dx9fn2JDcU3w-qkmiiC2a

unrelated question (couldn’t squeeze that in the headline, hope that makes it still searchable in the knowledge base):

I want to get rid of the button below the products (http://prntscr.com/92mv9y)

I tried:
.product-actions{display:none;} which wouldn’t work,
however .product-actions{visibility:hidden} works.

Any ideas?

Thanks in advance!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
.mobile-header-opts{
top:82% !important;
}
#logo h1, #logo h2, #mobile-logo h1{
font-size:17px !important;
}
}

Thanks
Mohammad

[bza]

Hi Mohammed,

Thanks for the reply. It basically works like this, but it doesn’t look nice from a layout perspective.
Is it possible with automatic word wrapping, like I visualized here: http://i.imgur.com/4ol1nBy.jpg

For the other 2 requests, should I open separate threads for them?

Like tablet portrait mode doesn’t work well: http://i.imgur.com/A10nOmB.png

And how to remove the buttons: http://i.imgur.com/N9ZU1OL.png

Thanks!

[David Martin – Support]

Hi,

This should help with that:

@media only screen and (max-width: 767px) {

#mobile-logo {
    max-width: 70%!important;
}

.mobile-header-opts {
    top: 50% !important;
}

}

– David.

[bza]

Hmm, that’s another solution that isn’t very satisfying.
It just crops the headline. http://i.imgur.com/jY7HzUl.png

What about my other 2 requests?

Should I open seperate threads for them?

[bza]

Would it be possible to use another name/header for mobile? so I would choose something shorter to display it correctly. maybe that is easier?

[Kyle – SUPPORT]

Hi

Yes, or an image logo

– Kyle

[bza]

OK, great. Could you give me a hint how to change the text only?
I checked the knowledge base and I found a way to add another mobile logo.
However only changing the text would be preferable for me…

[David Martin – Support]

Hi,

It’s not possible, you can only change the logo image for different screen sizes.

A CSS solution for a phone size would be this:

@media only screen and (max-width: 767px) {
#logo img, 
#logo h1, 
#mobile-logo img, 
#mobile-logo h1 {
    display: inline-block;
    font-size: 0!important;
}
#mobile-logo h1:before {
    content: "Site Name";
    font-size: 16px!important;
    height: 30px!important;
    line-height: 36px!important;
}
}

Thanks,
David.

[bza]

Works well. Thanks!

[Mohammad – SUPPORT]

Hi,
Great thanks to David 🙂 .
Thanks
Mohammad