Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I’m Using Tesseract theme with Page Builder plugin and any full size background images in the pagebuilder won’t resize/rescale when viewing on mobile devices.
I have used full size images on almost every page..
is there a simple solution for this?
any help would be greatly appreciated…..
thank you
Hi Trikaecoresort.com
Thanks for reaching out.
There is a fair bit going on here. Let’s start with the first row. You ideally need to drop the empty paragraphs, there are three below the buttons.
The space above the headline is being added by Easy Google Fonts with the following:
.home-headline { color: #f7f7f7; font-family: 'Roboto Slab'; font-size: 84px; font-style: normal; font-weight: 300; margin-top: 161px; }The margin-top ideally, also needs to be dropped. Removed.
Next, edit the row concerned, click Attributes top right, and enter a custom row class name:
Next, install a Custom CSS plugin if you don’t already have on installed. Page: SiteOrigin CSS Editor
Next, go to Appearance > Custom CSS or wherever your Custom CSS plugin is located and insert the following:
/* Page Builder Styles */ @media (min-width: 680px { .custom-home-hero .textwidget { margin-top: 161px; margin-bottom: 100px; } }You can make adjustments to the values as required. Let me know once that is done, I’ll take a look at the image then.
Hi Andrew,
Thanks for the reply…
I have adjusted the settings as advised and unfortunately the 3 full screen images on the page still won’t resize for mobile devices.
reguards,
trikaecoresort.com
Thanks, we’re just working that first image for now. I’ll come back to you shortly.
One super important aspect of responsive design is that we can’t use static elements to create space. Well at least, not without dropping them on mobile.
Please, in the first row, remove this markup:
Is that the spacers i have used?
where do i find that code?
If you send a set of temporary login details we can help with this first row. Instructions to follow.
Hi Trikaecoresort.com
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
ok sure i will set it up now
The spacers are the challenge. They aren’t dynamic or being dropped on mobile so they negatively impact the responsive behaviour of the page.
ok that’s done
Just to let you know i’m at the airport and will be bording in half an hour so if i dissapear im on a plane and will have to resume sometime later.
Thanks
ok, do you want me to remove the spacers now?
Please. Let’s just work that first row for now. All the spacers need to go. We need to create padding in a my dynamic way.
ok spacers removed
Thanks. Did you insert this in Appearance > Custom CSS?
/* Page Builder Styles */ @media (min-width: 680px { .custom-home-hero .textwidget { margin-top: 161px; margin-bottom: 100px; } }yes i did
What’s the name of the Custom CSS plugin you’re using? Or did you insert this into a theme provided Custom CSS field?
simple custom css
under the appearance colum on the left
Sorry, error in Custom CSS, use:
/* Page Builder Styles */ @media (min-width: 680px) { .custom-home-hero .textwidget { margin-top: 161px; margin-bottom: 100px; } }ok thats done and is looking good!
can i use the same procedure and code for the others?
You could also drop the headline font size down below 680 like this:
@media (max-width: 680px) { .custom-home-hero .textwidget .home-headline { font-size: 40px; } }Adjust value as required.
Very similar procedure. It all depends, is the padding top and bottom the same? Remember we said:
So, if those are the same for the other rows, then we just need to add the class name into the new row Attributes field.
If we need custom padding then we might need to repeat the procedure but with a new class name for the next row.
I just did the font code and lost my spacing again
Ahh, it looks like you removed the first rule we added.
So our Custom CSS should now look like this:
/* Page Builder Styles */ @media (min-width: 680px) { .custom-home-hero .textwidget { margin-top: 161px; margin-bottom: 100px; } } @media (max-width: 680px) { .custom-home-hero .textwidget .home-headline { font-size: 40px; } }and no they’re not the same spacing values
Then you’d need to repeat the process with a new class name. custom-home-hero-sales or whatever makes sense for the row.
thanks that’s fixed it again, im not sure why it dropped the first one
ah ok, i get it!!
and for ones with out text?
without text**
Same solution. Leave the Visual Editor widget in place just remove the contents from the Text tab within the widget.
full screen image cells without text code?
Example row?
would i use an equal margin-top and margin-bottom?
bottom row on that page for example
For sure, I checked out the bottom row, it has a Visual Editor in it. Remove the contents from Text tab in the widget. Leave widget in place. You can use equal margin top and bottom OR equal padding.
oh awesome….
Thanks so much for your help
For sure :)
for some reason that worked for the bottom row on my macbook but not on the mobile viewing
There is no content there to help the image for mobile so we’d need one more rule.
.custom-home-hero-rainbow .textwidget { min-height: 200px; }Adjust as required.
This is a comment in CSS:
They don’t do anything functional. Use them to organise your CSS so it makes sense when come back to it later.
ok i understand
I just edited it and it still isn’t resizing on mobile
The most you can use for min-height there is 208px.
but the image is 500…?
looks great on mobile but now not on my macbook
The image is set to cover, which means it scales to best fit the space.
You’ll need the min-height AND the margin rule you had in there before. Looks like you’ve removed the margin rule.
ok thanks so much i have to go now
Sounds good :)
ok so what do you do if you are staring at all of this like its another language? is there a plug in or something simple?