Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #797242

    Hi,
    I have a problem with the responsive design of my website. Within the Ipad view, my column reduces the width, so the text overlays the column.
    I have inserted the following into the quick CSS section without success:

    @media only screen and (max-width: 990px) and (min-width: 768px) {
    .your-custom-class .avia_textblock { min-height: 45px; }}

    Any ideas on how to become a fix width for my column?
    Thanks in advance for any help
    Claudia

    #797273

    Hey gestaltungsstil,
    Please include the url to the page in question so we can take a closer look.
    also a screenshot of how you would like it to look would be helpful.

    Best regards,
    Mike

    #797315

    Hey Mike,
    thanks for your answer.
    See below the link to the urls with z´the problem.

    And there you can see screenshots about the problem with the text:

    The left picture shows, that the text is not fitting into the box.

    The preview for tablet mode in wordpress shows a correct view, but in reality you can see the results like screenshot.

    Thanks for your help.
    Best regards
    Claudia

    #797567

    Hi, Claudia,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file: 

    
    @media only screen and (max-width: 990px) and (min-width: 768px) {
       .avia-builder-el-2, .avia-builder-el-7 {width:47% !important;}
       .avia-builder-el-4, .avia-builder-el-5, .avia-builder-el-6  {display: none!important;}
    }
    

    For your reference, if you would like to use a custom class, please make sure you follow turn it on first, and use the right custom classes in your CSS. :) Here’s how to turn it on: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Sarah

    • This reply was modified 6 years, 10 months ago by Sarah.
    #800525

    Hi Sarah,
    thanks for your information.

    I included the code in the Quick CSS but the solution didn´t work properly.
    Some other sides are showing now strange behaviour while sizing.
    Please have a look at my screenshots .
    Do you have any further suggestions for my problem?

    Thanks in advance.
    Claudia

    #800701

    Hi Claudia,

    Can you provide us admin access into your website so we can take a closer look?
    Best regards,
    Sarah

    #800788

    Dear Sarah,
    here you can find the requested details.
    Thanks in advance
    Claudia

    #800937

    Hi Claudia,

    Thank you for the information. I have edited the code, and that part of your website should look better now, and let us know if you need help with anything else.

    Best regards,
    Sarah

    #801079

    Hi Sarah, thanks for your help.
    unfortunately the successful result is only visible on the “Home”. If you have a closer look in all the other sites, there are many problems shown.
    Mostly in cross view of the tablet all seems correct, but in high view of the tablet there are many errors: the headline isn´t in the center, sometimes textblocks are invisible, also the table isn´t shown there.
    Please have al look in my pictures about the tablet use (see link below). And please notice my picture description about the errors.

    Thanks a lot
    Claudia

    #801400

    Hi!

    Sorry, but the picture that you sent doesn’t work for me. Can you check it please?

    Best regards,
    Sarah

    #801405

    Hi Sarah,
    please try again….
    Best regards
    Claudia

    #801898

    Hi Sarah,
    could you see the examples for the incorrect sites now?
    Best regards
    Claudia

    #802852

    Hi,

    Please remove the previous css modification then add the following code.

    @media only screen and (max-width: 1024px) {
        .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%;
        }
    }

    The css code above should increase the width of the columns on tablet view same as the phone view.

    Best regards,
    Ismael

    #803869

    Hi Ismael,

    now it looks great! Thanks a lot for your help.

    Berst regards,
    Claudia

    #804381

    Hi,

    Great! Glad that it is working. If you have more inquiries, please feel free to open a new thread. :)

    Best regards,
    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Fix width for column in Enfold’ is closed to new replies.