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
10 years ago · Last reply by Andrew Misplon 10 years ago

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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    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 10 years, 5 months ago

    This is a private message.

  9. Andrew Misplon Staff 10 years, 5 months ago

    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 10 years, 5 months ago

    This is a private message.

  11. Andrew Misplon Staff 10 years, 5 months ago

    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 10 years, 5 months ago

    Same theme, same challenge as you’re facing.

  13. Ruben Best 10 years, 5 months ago

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

  14. Andrew Misplon Staff 10 years, 5 months ago

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

  15. Ruben Best 10 years, 5 months ago

    {code}” {/code}

  16. Andrew Misplon Staff 10 years, 5 months ago

    Almost there. code must be in square brackets.

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

    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 10 years, 5 months ago

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

  20. Ruben Best 10 years, 5 months ago

    I’v followed your steps but nothing happened?

  21. Andrew Misplon Staff 10 years, 5 months ago

    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 10 years, 5 months ago

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

  23. Andrew Misplon Staff 10 years, 5 months ago

    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 10 years, 5 months ago

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

  25. Andrew Misplon Staff 10 years, 5 months ago

    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