Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 10, 2019 at 4:15 pm #1077029
    Roger

    Hi
    On my welcome page I have a text next to a slider. If I shrink the browser window than the text does not break the line. Please see my screenshot below on privat content to bether understand what I mean.

    Thanks a lot for your help
    kind regards
    Roger

    • This topic was modified 5 years, 9 months ago by Roger.
    March 10, 2019 at 5:26 pm #1077040
    DigitalEssence

    Hi @roger

    I can’t see your screenshot as I’m not a mod so I’m just guessing here (a link to your site would also be helpful) but have your tried reducing the width of the texts parent so it breaks to a new line?

    Or use the word-break selector and add a suitable width that creates the result you want.

    .exampletxt {
-ms-word-break: break-all;
     word-break: break-all;
     /* Non standard for WebKit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
width: 12em;
}
    <div class="exampletxt">
Hello there, my name is Roger and I'm trying to get my text to break on to a new line.
</div>
    March 10, 2019 at 9:50 pm #1077120
    Mike

    Hi,
    @Roger Thanks for the login, the reason your text is not floating around your slider is because both elements are in columns that dictate they are certain widths. To get the text and special heading to float around the slider like this:
    2019-03-10-152828
    please try putting all of them in the same column, like this:
    2019-03-10-153401
    Now we will float the elements, set the width of the elements and give them a clear so that the text will wrap:

    .test_section .avia-slideshow {
  float: left !important; 
  margin: 0 20px 20px 0 !important; 
width: 50% !important;
}
.test_section .av-special-heading,.test_section .av_textblock_section,.test_section .avia_textblock   {
  text-align: justify !important; 
  text-indent: 2em !important;
  clear: right !important;
  margin-top: 0px !important; 
}

    I created an example for you on your homepage for you to see, but I hid it with “display: none !important;” at the top of the css in the code block. Just open the code block and remove “display: none !important;” and then save an look on the front end.

    If you like this please move the css to your Quick CSS and move the element where you want it. Let us know if we can assist more.

    Best regards,
    Mike

    March 17, 2019 at 3:03 pm #1079592
    Roger

    Hello Mike

    Thanks for your help. Well, I can not make it work like you show on the first screenshot. I created a welcome clone page so I not mess up my original page. Mabey you can have a look at it and tell me what I do wrong. sorry.

    Thanks for your help
    Roger

    March 17, 2019 at 4:29 pm #1079621
    Mike

    Hi,
    Thanks for the test page, the first step was to wrap the css in the code block with:

    <style> ... </style>

    so it would work as css, then the column needed to have the custom class “test_section” so the css could tell it what to do.
    Please clear your browser cache and check.

    Best regards,
    Mike

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