Styling different between desktop and mobile
- trogladyte
- Offline Topic Author
- Platinum Member
- Posts: 751
- Thanks: 16
Styling different between desktop and mobile was created by trogladyte
Posted 3 years 4 months ago #59067I had exactly the same issue on another site (which I did after starting this one as I liked the clean look) at www.allamericanshutter.com/ . To get that one looking good I needed to increase the size of the "box" to 52 x 52 with 5px padding all round. However, you'll see, on mobile, this one is wrong in layout too. I did add a pretty hefty margin to the bottom of the button to make it not run off the header, but, of course, that screws with layout on desktop where it's towards the top rather than centered vertically.
On both, I did make the hamburger 2.4em BOLD which may or may not be at least part of this issue. I'm just surprised it changes so much in layout between desktop and phone.
The other issue is, try what I might, I cannot get the menu button to center in the block. See it's right justified. FYI, I have the menu assigned to a regular module block in Template Creator. Assigning it to a horizontal menu block causes it to be displayed inside the TC hamburger menu.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Please Log in or Create an account to join the conversation.
Replied by ced1870 on topic Styling different between desktop and mobile
Posted 3 years 4 months ago #59070I don't really understand.I see the same hamburger button in both desktop/mobile
the difference is the position. Is that what you mean ?
this is because on mobile your modules are stacked (in the template), on desktop they are aligned
to align the icon, you can add this css code
CEd
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
- trogladyte
- Offline Topic Author
- Platinum Member
- Posts: 751
- Thanks: 16
Replied by trogladyte on topic Styling different between desktop and mobile
Posted 3 years 4 months ago #59071A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Please Log in or Create an account to join the conversation.
Replied by ced1870 on topic Styling different between desktop and mobile
Posted 3 years 4 months ago #590791/ the mobile menu is not designed to be centered at any time. I have give you the code to align the button if you want
2/ the button is positioned in absolute, this means that it does not manage the height of the bar, they are 2 different things
you have
line-height: 43px for the bar
height 48px for the button
then you got 5px of the button that are out of the bar, do you see ?
you can simply set the line-height at 48px, same height as the button. Or set the button height on 100%
Hope it helps
CEd
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
- trogladyte
- Offline Topic Author
- Platinum Member
- Posts: 751
- Thanks: 16
Replied by trogladyte on topic Styling different between desktop and mobile
Posted 3 years 4 months ago #59089By assigning various random colors to parts of the menu, I figured out what is controlling what. I set the height of the button at 100% as you suggested, but still I have the hamburger lines looking fine on desktop, but not centered vertically within the button on a phone. There isn't anywhere else to alter how it displays on a phone. If I add 5px of padding at the top of the button, the desktop is wrong but the phone looks (more or less) correct.
Do I require separate menus to be set up for desktop and phone? I just ended up removing the borders as I'd already spent at least 2 hours fiddling to try and make it work.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Please Log in or Create an account to join the conversation.
Replied by ced1870 on topic Styling different between desktop and mobile
Posted 3 years 4 months ago #59105It seems that you have now replaced with another menu on your website ?
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.