-
Posts
-
Hi,
On the website I am building, I am experienceing some issues on smaller screen sizes.
1) on screensizes smaller than ~830px the menu items start to overlap with the logo.
This one I was able to resolve by setting the main menu switching to mobile view (hamburger icon) when screen witdh is below 990px under main menu>general>menu items for mobile.
2) I have a 4 column footer which contains a table in the third column.The footer starts to look bad on screen width below 1020px. The heading of column 3 gets cut off by content of column 4. also the table in column 3 starts to display bad on screen widths below 1020px.
The solution would be to have the footer displayed to mobile view (footer columns display below each other) on screen widths below 1020px. How can I implement this behavior?
An even better solution would be: When the screen width is equal or below 1020px, then column 1 and 2 should display next to each other. column 3 and 4 display below in seperate rows respectively.
How can one ensure such beahvior?
3) I also don’t like the behavior of the “leistungen” subpage where I worked with gridrows. on the first gridrow, when the screen width gets too narrow, then the picture gets very thin and too high because the text is a bid long. I don’t know whats a smart way to deal with this issue design wise. Maybe one could set a max height for the grid rows. But then the text might not fit. One could force switiching to mobile view at a certain screen width. But I kinda like the design, only the first grid row has issues because of the amount of text. Maybe you have ideas on how to best deal with the issue.
Please find login credentials on private content. I am looking forward to your reply.
best regards, Peter
I think maybe it might be best to let the site break to mobile view from screen size<990px and below. What do you think? How to achieve that?
Hi P3T3R_0ne,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1024px) { #top #footer div .av_one_fourth { margin-left: 0%; width: 50%; clear: none; } }3 Could you please attach some screenshots of the issue?
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
thank you, that css code works perfecly for solving the issue in the footer.
concerning 3)
the subpage “/leistungen” has a specific layout which looks really nice on normal screen widths. But, as soon as the screen size is small (short before mobile), then it starts to look weird because the image is realy tall and narrow (see screenshot). I don’t know if this can be solved.Also, when the screen width gets really wide, it starts to look weird. (see screenshot). I have a full width layout for the whole website. But I want to limit the maximum width. How can I set a max width for the whole website? Do you see any problems with setting max width?
Hi P3T3R_0ne,
Well, with this code you can have the grid container at a certain width on big screens:
@media only screen and (min-width: 2400px) { #top .av-layout-grid-container { max-width: 70vw; margin: 0 auto; } }As for the small screens, we can make it get to the mobile view sooner.
Best regards,
VictoriaHi Victoria,
thank you for the reply. Setting max-width like that is an ok solution for now.
How can I set the website to change to mobile view earlier? How can I set it gloabaly? Is it also possible to set this page specific?
Best regards, Peter
Hi,
Add this to quick css and adjust 1024 to what you need:
@media only screen and (max-width: 1024px) {
nav.main_menu { display: block !important; } #avia-menu .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }To make is page specific you would need to add the page id class to the front of it.
Best regards,
Jordan Shannon
- The topic ‘Adjust Mobile Breaking Point’ is closed to new replies.