View Replies (8)

Resolved Mobile top bar

  1. Issue
  1. Shopin
  2. Tuesday, 05 September 2017
Hello,

Please see http://heefashion.com on portrait mobile display.
I have 3 modules on the top right position (top-1).

On mobile display:
1. The logo is very small - how can I make it a bit bigger?
2. There's a gap between "Wishlist | Account" and the 2 shop modules (cart and currency) - how can I get rid of this gap?
3. The 3 modules are bigger than the top bar - how can I have the 3 modules inside the top bar?

Thank you,
Amiel
Responses (8)
Hi,
ad 1) You have to use layout settings and play with Module Layout settings (screenshot)
Attachments (1)
mobile-layout.jpg mobile-layout.jpg
  1. more than a month ago
  2. Shopin
  3. # 1
Please use my fix:


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

#sp-top1 p {margin:0;}

}

small help.

ad 2 / 3) Typical mobile screen have 320px-360px-380px of width - how you imagine to hold everything in one row, any idea?

If you can show me mockup we can talk further.
  1. more than a month ago
  2. Shopin
  3. # 2
BTW
If possible I suggest to remove USA / EUR / GPB and use just a symbol "$" etc. You will safe some space (pixels).
BTW
$ is before price not after. Check J2Store setting to fix it.
  1. more than a month ago
  2. Shopin
  3. # 3
Hi Paul,

Thanks. I understand now the limitation of holding everything in one row.
I used your fix - look good now.

At the momnet, the modules are under the top bar - I don't mind that, but is there a way to push the breadcrumb down so that the modules will be visible?

Thank you!
Attachments (1)
Untitled.jpg Untitled.jpg
  1. more than a month ago
  2. Shopin
  3. # 4
It's not good: the modules are part of the header and remain sticky.
I'd prefer them in a row under the header, not sticky.
Is there a way to do that?
Thanks,
Amiel
  1. more than a month ago
  2. Shopin
  3. # 5
I think that the best would be as shown in the file attached.
If possible - sticky, if not - also good.
Is it possible?
Thank you,
Amiel
Attachments (1)
Untitled-1.jpg Untitled-1.jpg
  1. more than a month ago
  2. Shopin
  3. # 6
I think you should hide breadcrumb in mobile view, by custom CSS, Less is More.




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

#sp-breadcrumb {display:none;}

}
  1. more than a month ago
  2. Shopin
  3. # 7
OR



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

#sp-breadcrumb {margin:5px 0; font-size:11px;}

#sp-breadcrumb span {display:none;}

}
  1. more than a month ago
  2. Shopin
  3. # 8


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.