Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 21, 2017 at 6:59 pm #797242
    gestaltungsstil

    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

    May 21, 2017 at 8:27 pm #797273
    Mike

    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

    May 21, 2017 at 10:04 pm #797315
    gestaltungsstil

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

    Home

    Beratung

    Akademie

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

    Responsiveproblem

    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

    May 22, 2017 at 11:50 am #797567
    Sarah

    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 7 years, 7 months ago by Sarah.
    May 27, 2017 at 12:46 pm #800525
    gestaltungsstil

    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

    May 28, 2017 at 5:15 am #800701
    Sarah

    Hi Claudia,

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

    May 28, 2017 at 12:53 pm #800788
    gestaltungsstil

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

    May 29, 2017 at 5:06 am #800937
    Sarah

    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

    May 29, 2017 at 1:39 pm #801079
    gestaltungsstil

    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

    May 30, 2017 at 8:53 am #801400
    Sarah

    Hi!

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

    Best regards,
    Sarah

    May 30, 2017 at 9:06 am #801405
    gestaltungsstil

    Hi Sarah,
    please try again….
    Best regards
    Claudia

    May 31, 2017 at 9:44 am #801898
    gestaltungsstil

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

    June 2, 2017 at 5:16 am #802852
    Ismael

    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

    June 5, 2017 at 1:06 pm #803869
    gestaltungsstil

    Hi Ismael,

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

    Berst regards,
    Claudia

    June 6, 2017 at 8:25 am #804381
    Ismael

    Hi,

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

    Best regards,
    Ismael

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