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
Pagebuilder Responsive Full Size Image
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.
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
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.
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?
Edit the first Visual Editor widget and delete:
I just see this:
[spacer height=”30px”]
Moin Moin
everything and do what you love
My MissionDownload CV
[spacer height=”100px”]
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.
This is a private message.
Anything in WordPress used in the editor with square brackets is usually a shortcode.
This is a shortcode: [spacer height=”30px”]
Remove both.
This is a private message.
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.
Same theme, same challenge as you’re facing.
Yes. But I don’t know where to find this Line:
Sorry, that didn’t print. Which part are you not following? Thanks.
{code}” {/code}
Almost there. code must be in square brackets.
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:
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; }}Adjust the margin-top and margin-bottom values as required.
I’v followed your steps but nothing happened?
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.
dosn’t :-( the min-width is red?!
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; } }WOW! You are my hero!
Big Thank you! Great
Awesome :) Really glad to hear that helped.
All the best with your site.