-
Posts
-
Hello, team,
I have created a website with the theme Enfold (template Freelancer), Child theme. A really nice design, but the responsive view only works really well in the desktop view.
Images in the mobile view are cut. How can I display them in full? Also the view for tablets should jump as well as for mobile – that means the rows should be displayed below each other (the two column contents that are currently shown next to each other). It doesn’t look good on the narrow screen now). How can I set this or which CSS code should I add in the Theme Options (Note: I’m not a programmer).
Thank you very much for your support.
Many greetings from Germany,
SonjaHey smoeschter,
Thank you for the inquiry.
Images in the mobile view are cut.
The background images are cut off or they overflow outside the column in order to preserve their aspect ratio. That’s how they respond on mobile view. You can either set the columns to not display on mobile view or set the background repeat settings to “Scale to fit” so that the whole image is visible within the background positioning area. But please note that this option will leave spaces or gaps within the column container depending on the image size.
Best regards,
IsmaelThanks for the answer, Ismael. Unfortunately she only answers a part of my question and doesn’t really make me happy because of the technical possibilities. The second question, how to make a column break, can be answered in the tablet view, without the two columns being pushed closely together. Optimal would be a representation among each other.
Many greetings, SonjaHi,
Sorry for the late response. The column breakpoint can be adjusted using the following css code. This will make the column stack above each other on tablet view — same as they do on smaller screens.
@media only screen and (max-width: 1024px) { .responsive #top #wrap_all .av-flex-cells .no_margin { display: block; margin: 0; height: auto !important; overflow: hidden; padding-left: 8% !important; padding-right: 8% !important; } .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { margin: 0; margin-bottom: 20px; width: 100%; } }Please don’t forget to toggle the Performance > File Compression settings after adding the code.
Best regards,
IsmaelHi Ismael, I’m afraid it’s not working. I inserted the code into the Quick CSS in the Theme Styling. When I merge the desktop view, the columns are wrapped. However, some of the H1 headings are not displayed correctly (much too small), some are. There is no wrap on the tablet – that was the goal to make it wrap on small screens. It is also unpleasant that longer words like Rechtsanwaltskanzlei (in German a pretty long word for law firm) are not separated. Hyphenation should be effective here.
And: what do you mean by “to toggle the Performance & File Compression”? Which plugins do you mean here? I have disabled some of them – without any visible success.
Thanks again for your help.
SonjaHi,
Thank you for the update.
For some reason, we forgot to adjust the max-width value in the css media query. We adjusted it now and disabled the Performance > File Compression settings temporarily. The columns are now stacking on top of each other on tablet view or when the screen width is equal or less than 1024px. However, the images are barely visible because the cell doesn’t really contain any content, so it’s not tall enough to show the images. If you want to just hide the cells on tablet view — same as they do on phone view — please add the following code inside the css media query.
.flex_cell.av-hide-on-mobile { display: none !important; }Best regards,
IsmaelAs I have noticed, there is no satisfactory solution for responsive display and image display – this is suboptimal. Sorry, I have to say that. I’ve already attached image content to the start image (the first image) with Photoshop in the hope that it won’t be cut off again in the middle of the head on the tablet.
Second thing: The menu bar on the left slips into the header of the container. The logo is not a block element. The menu overlays the logo on narrow screens. Mobile it is displayed correctly in the “burger menu”. Why not on the desktop? Is there a solution?
Thanks for your help,
SonjaHi Sonja,
The menu can be set up to become the burger menu at an earlier breakpoint in the theme options:
If you need further assistance please let us know.
Best regards,
VictoriaHi Sonja,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
unfortunately I now have another serious problem after I switched off the maintenance mode and registered the website with Google: It says “Sorry, we are currently updating our site – please try again later.” The robots.txt page was empty, which I filled so that a Google Bot could read it. Gradually I don’t know any more. The same problem on desktop and mobile view.
The maintenance mode was active for a very long time (because the project took so long), I deleted the plugin with the maintenance mode. I delete the cache. Maybe something is still hanging in the database?
Do you have any ideas?
Best regards from Sonja
- You must be logged in to reply to this topic.