Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1157846

    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,
    Sonja

    #1158755

    Hey 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,
    Ismael

    #1159083

    Thanks 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, Sonja

    #1159742

    Hi,

    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,
    Ismael

    #1160003

    Hi 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.
    Sonja

    #1160540

    Hi,

    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,
    Ismael

    #1163669

    As 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,
    Sonja

    #1163853

    Hi Sonja,

    The menu can be set up to become the burger menu at an earlier breakpoint in the theme options:
    Image 2019-12-08 at 19.42.51.png

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1163991

    Thanks, Victoria :)
    Best regards,
    Sonja

    #1164137

    Hi Sonja,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1165320

    Hi 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

    #1165527

    Hey there,
    It was my error in the Theme Options settings. All good :)
    Best, Sonja

    #1165759

    Hi Sonja,

    Great, I’m glad that you got things working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.