Undesirable text wrap in WPBakery

Home Forums Jevelin Theme Undesirable text wrap in WPBakery

Home Forums Jevelin Theme Undesirable text wrap in WPBakery

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    RESOLVED Posts
  • cagross
    Participant

    Hello. To my page I’ve a simple Text element in WPBakery. That element contains some text, and an image. At desktop screen widths, the text flows around the image as expected (see attached screenshot jba-page-desktop). But at lower screen widths, the text does not flow evenly around the image (see attached screenshot jba-mobile-line-spacing). Plus, there are undesirable line breaks (see attached screenshot jba-mobile-line-spacing).

    How can I resolve this?

    Thank you.

    edit: One of the screenshots I uploaded appears to be upside down. I’m not sure why–it is not that way on my computer.

    • This topic was modified 5 years, 1 month ago by cagross.
    Attachments:
    You must be logged in to view attached files.

    Hi @cagross,

     

    I hope you are well today and thank you for your question.

     

    Could you please share me the page URL from your site where it is displaying so that I can help you?

     

    Best regards,
    Shufflehound team

    cagross
    Participant

    This is the page: https://staging-e43sehju.versionpress.com/about/

    Let me know if you’d like admin access–I can provide it.

    Thanks.

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .wpb_text_column.wpb_content_element {
        word-break: break-word;
    }

    cagross
    Participant

    OK thanks for that. I added your code, and see the change it made. But that’s not exactly what I want. Actually, I didn’t make it clear in my original message what I wanted, so I’ll describe it now.

    I’d like to emulate the layout on this page.  Specifically, at screen widths of 575 px and below, the layout changes, so that images are on a row of their own, and full width (see attached screenshot).

    How would I ensure that behavior on my existing page?

    Thanks.

    Attachments:
    You must be logged in to view attached files.

    Solution for this topic

    You can achieve this using below custom CSS code.

     

    @media (max-width: 575px){
    #content img.alignleft {
        clear: both;
        float: none;
        display: block;
        width: auto;
    }
    }

    cagross
    Participant

    OK thanks for that. I’ve added it. I actually changed the break point from 575 px to 550 px. But I have a couple follow-up questions:

    1. At that break point, the layout does change. But the images are not full width, as in the example site I showed you. Is there any way to ensure that?

    2. This is a custom CSS solution. To be clear, would it be possible to implement this solution via WPBakery, specifically, by editing the Responsive section on the page, i.e. via these instructions? Or do those instructions pertain to something else?

    Thanks.

    edit: Also, when the layout breaks to a single column, is there a way to increase the width of the column? As you can see from the example site (https://asjtest.tidalwavesolutions.com/about.html), at low screen widths, the content (both text and images) are nearly the full width of the screen.

    • This reply was modified 5 years, 1 month ago by cagross.

    1. At that break point, the layout does change. But the images are not full width, as in the example site I showed you. Is there any way to ensure that?

    The image that you have used is smaller in size so please use the larger image to achieve the same result.

     

    2. This is a custom CSS solution. To be clear, would it be possible to implement this solution via WPBakery, specifically, by editing the Responsive section on the page, i.e. via these instructions? Or do those instructions pertain to something else?

    No, I don’t see any other way to achieve this than using custom CSS code.

    cagross
    Participant

    OK thanks. What about the last question I added later:

    Also, when the layout breaks to a single column, is there a way to increase the width of the column? As you can see from the example site (https://asjtest.tidalwavesolutions.com/about.html), at low screen widths, the content (both text and images) are nearly the full width of the screen.

    To achieve this, you have to develop custom code in the child theme of Jevelin theme.

     

    Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support

     

    If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

    cagross
    Participant

    Are you saying you think that requires custom PHP edits?

    Don’t you think that can be accomplished with some additional CSS? For example, if I change the max-width on the element from 300 to 450, the content becomes wider (see attached screenshots). Wouldn’t that get me close to what I want? Or am I misunderstanding something?

    To be clear, I am a developer, and am comfortable editing PHP, HTML/CSS, or JS. But this looks like it can be done with just CSS–would you agree?

    Attachments:
    You must be logged in to view attached files.

    Yes, that is what I mean to develop custom CSS code.

    cagross
    Participant

    OK got it. So just to be clear, what you’re saying here is, “Hey, I’ve given you a start, but at this point, you’ll have to finish it on your own.” Does that sound accurate 🙂 If so, no worries at all. I was just mainly concerned that this somehow might require some PHP edits.

    Thanks for the help. I’ll take it from here.

    cagross
    Participant

    Actually wait, I have a big issue moving forward. As you can see in those last screenshots, the ‘max-width’ value has an ‘!important’ added by the theme. So I will not be able to modify that value with custom CSS–correct?

    Solution for this topic

    Actually wait, I have a big issue moving forward. As you can see in those last screenshots, the ‘max-width’ value has an ‘!important’ added by the theme. So I will not be able to modify that value with custom CSS–correct?

     

    You can overwrite it.

     

    Please refer the information provided in the below pages to understand how you can do it.

     

    https://stackoverflow.com/a/11178731/1287548

    https://stackoverflow.com/a/14462890/1287548

    cagross
    Participant

    Sorry, I missed this. Everything is OK now. We can consider this resolved, thanks.

    You are most welcome here 🙂

Viewing 17 posts - 1 through 17 (of 17 total)