-
Posts
-
Hi,
I have a problem with the mobile appearance of the website.
1. The pictures are not completely displayed.
2. Too much empty space between the lines.
3. The order of presentation should be identical to the presentation on the desktop.
Picture – text
Picture – text
Picture – textWould be great if I could get a solution to this problem.
Thanks.Best Regards
StefanHey Bassmann,
Please have a look at the following thread:
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
unfortunately it does not work.
The problem is still there – no change.
Would be great if you would send me a solution.Best Regards
StefanHi Victoria,
all good!
It works. ;-)Only one more thing, the distances are on the phone between the individual lines are too large (see screenshot).
Would you have a solution for that?
Best Regards
StefanHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/* CSS - */ @media only screen and (max-width: 767px) { .responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner { padding-top: 0 !important; }}You may not see the changes until the cached files are cleared in your browser.
Please perform the below steps to clear the browser cache:
1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.
Best regards,
VinayHi Vinay,
thanks, but now the problem is that the pictures are not completely displayed.
Something is probably canceling each other out.
Enclosed the complete css file!Maybe you could check out where the problem lies.
Attached the screenshot with the problem.———————————————————————-
@media only screen and (max-width:767px){
.home #av-layout-grid-2, .home #av-layout-grid-4 {
display: flex;
flex-direction: column-reverse;
}
}
@media only screen and (min-width: 480px) and (max-width:767px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 20vw;
}
}@media only screen and (max-width: 479px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 20vh;
}
}
@media only screen and (max-width: 767px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 0 !important;
}}
———————————————————Thanks.
Best Regards
StefanHi Stefan,
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 (max-width: 767px) { .responsive #top #wrap_all .av-flex-cells .no_margin { padding: 30px !important; min-height: 300px; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
with the last css statement it looks good on the phone, but now the images on the desktop are no longer completely displayed.
Here are all the css statements that are included.
Some do not seem to agree.
Could you please check that?Best Regards
Stefan
————————-
@media only screen and (max-width:767px){
.home #av-layout-grid-2, .home #av-layout-grid-4 {
display: flex;
flex-direction: column-reverse;
}
}
@media only screen and (min-width: 480px) and (max-width:767px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 20vw;
}
}@media only screen and (max-width: 479px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 20vh;
}
}
@media only screen and (max-width: 767px) {
.responsive #top.home #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
padding-top: 0 !important;
}}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
padding: 30px !important;
min-height: 300px;
}
}Hi,
Thank you for the update.
All of the css media queries above are for mobile devices or smaller screens, so they shouldn’t have affected the desktop view. Did you add anything else aside from the css code listed above?
We don’t really see any issue with the site when we check it on desktop. Could you provide a screenshot of the issue? You can upload the screenshot to imgur or dropbox.
Best regards,
IsmaelHi,
thanks.
it works now!But I have another request!
My customer would like to see on the start page no logo and on the other pages no logo and no margin (the whole picture with the Hamburger menu so only to be seen – see screenshot).Best Regards
StefanHi,
Glad to know that the modifications are working properly now!
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
Ismael
- The topic ‘Mobile view – not ok’ is closed to new replies.