This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Pagebuilder Responsive Full Size Image

Resolved 25 replies pluginplugin-page-builder
Ruben Best
Started · Latest reply by Andrew Misplon

Hi,

i want to use a Full Size Image on the Tesserect theme. (example: http://imalreadyhere.com/)
The problem: The image is not responsive. Do you have a solution for this?

best regards,
Ruben Best

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

25
  1. Andrew Misplon Staff

    Hi Ruben

    Thanks for reaching out. This all has to do with the way space is being added above and below the text contained in the image. I just ran over a similar thread this morning, it’s the same problem. You can see the solution here:

    Thread: Page Builder background image won’t rescale for mobile devices

    Hope that helps.

  2. Ruben Best

    Hi Andrew,
    yeah cool. My problem: I’m not sure where to delete code… It would be nice if you could describe it more detailed. (Where to find the code …)

    Thank you very much!

    best regards,
    Ruben

  3. Andrew Misplon Staff

    It looks to be in your Easy Google Font styles:

    .home-headline {
    color: #71ade1;
    font-family: 'Roboto';
    font-size: 100px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 6px;
    line-height: 0.8;
    margin-top: 151px;
}

    margin-top is the issue. Just that declaration.

  4. Ruben Best

    My question refers to http://rubenbest.de/

    The top margin is set to 0,

    In the other thread you mentioned this row to be deletet:

    Where do i find it?

  5. Andrew Misplon Staff

    Edit the first Visual Editor widget and delete:

    <p style="text-align: center;"><span style="display:block;clear:both;height: 0px;padding-top: 100px;"></span>
  6. Ruben Best

    I just see this:

    [spacer height=”30px”]
    Moin Moin
    everything and do what you love
    My MissionDownload CV
    [spacer height=”100px”]

  7. Andrew Misplon Staff

    Not our theme so I’m just working off the source code. Cool, I see what’s going on now. Remove those shortcodes and we’ll rather apply the space ourselves, with responsive CSS.

  8. Ruben Best Private

    This is a private message.

  9. Andrew Misplon Staff

    Anything in WordPress used in the editor with square brackets is usually a shortcode.

    This is a shortcode: [spacer height=”30px”]

    Remove both.

  10. Ruben Best Private

    This is a private message.

  11. Andrew Misplon Staff

    So at this point is where the thread I linked to kicks in:

    Thread: Page Builder background image won’t rescale for mobile devices

    Custom row class, padding in Custom CSS etc.

  12. Andrew Misplon Staff

    Same theme, same challenge as you’re facing.

  13. Ruben Best

    Yes. But I don’t know where to find this Line:

  14. Andrew Misplon Staff

    Sorry, that didn’t print. Which part are you not following? Thanks.

  15. Ruben Best

    {code}” {/code}

  16. Andrew Misplon Staff

    Almost there. code must be in square brackets.

  17. Ruben Best 
    <span style="display:block;clear:both;height: 0px;padding-top: 250px;"></span>
  18. Andrew Misplon Staff

    All of the spacing has now been removed: http://rubenbest.de/.

    Next, you need to edit the Page Builder row, click Attributes top right, insert a CSS class in the first field in Attributes:

    custom-home-hero

    Next, install the SiteOrigin CSS plugin OR any CSS plugin.

    Go to Appearance > Custom CSS and target our new CSS class by inserting the following:

    /* Page Builder Styles */
@media (min-width: 680px) {
	.custom-home-hero .textwidget {
		margin-top: 161px;
		margin-bottom: 100px;
	}
}
  19. Andrew Misplon Staff

    Adjust the margin-top and margin-bottom values as required.

  20. Ruben Best

    I’v followed your steps but nothing happened?

  21. Andrew Misplon Staff

    We’re carry legacy errors from this morning :) Change your Custom CSS from what it is now to:

    /* Page Builder Styles */
@media (min-width: 680px) {
	.custom-home-hero .textwidget {
		padding-top: 200px;
		padding-bottom: 100px;
	}
}

    Should work.

  22. Ruben Best

    dosn’t :-( the min-width is red?!

  23. Andrew Misplon Staff

    Looking good on the front end:

    http://rubenbest.de/

    Just add the following to help mobile:

    @media (max-width: 679px) {
	.custom-home-hero .textwidget {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
  24. Ruben Best

    WOW! You are my hero!
    Big Thank you! Great

  25. Andrew Misplon Staff

    Awesome :) Really glad to hear that helped.

    All the best with your site.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread