mobile background generate blocks

Resolved evabo
(@evabo)

5 years, 4 months ago

Hi!
I am using GenerateBlocks with GPP, and it works really nice. I would just like to know if there is a way to adjust the background images for mobile devices. I used 1 for the whole page and 2 more for separate blocks. If not, is there something else I can do, maybe even disable the background for mobile?
Thanks!
Eva

The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)

Plugin Support David
(@diggeddy)

5 years, 4 months ago
Hi there,

GenerateBlocks Pro has Advanced Backgrounds which have full responsive controls, including different images for different devices.

In the free version you would need to add some CSS. Begin by selecting the Container Block you want to change the image for. In its Settings > Advanced > Additional CSS Class(es) add a custom class eg. no-mobile-background

Then add this CSS to remove the image, and swap the background color if required:
```
@media(max-width: 768px) {
  .gb-container.no-mobile-background,
  .gb-container.no-mobile-background:before {
    background-image: none;
    background-color: #000; /* Optional background color */
  }
}
```
If you want a different image, then you would need to give the block a CSS class for adding a specific image eg. mobile-hero-image
```
@media(max-width: 768px) {
  .gb-container.mobile-hero-image,
  .gb-container.mobile-hero-image:before {
    background-image: url('the_full_url_for_your_mobile_image');
    background-size: cover; /* set background sizing */
    background-attachment: initial; /* Remove fixed background if present */
  }
}
```
Thread Starter evabo
(@evabo)

5 years, 4 months ago

Hey David,

Thank you so much for your help! I used the first option for the smaller blocks and it works like a charm.
For the full background image I used the second option with a smaller version of the full picture, but it still looks weird. I tried switching the size from cover to contain, but then it only looks good on the first block. Are there any other options here?

Thank you!

Plugin Author Tom
(@edge22)

5 years, 4 months ago

Hi there,

You may need to play with different “size” options to find the right one. You can find them here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

The result will largely depend on the aspect ratio of the image.

Thread Starter evabo
(@evabo)

5 years, 4 months ago

Hi Tom,
Thank you! I changed the background from the block to the body, and now it works! Just one more question, is there a way to use a semi-transparent color for the Optional background color (@media(max-width: 768px) {
.gb-container.no-mobile-background,
.gb-container.no-mobile-background:before {
background-image: none;
background-color: #000; /* Optional background color */
}
}

Thank you!

Plugin Support David
(@diggeddy)

5 years, 3 months ago

You can use a RGBA value for your background eg.

background-color: rgba(0,0,0,0.5);

That example is a black background set to 50% (0.5) opacity.

You can use any RGB color value you like for the first 3 units, followed by the alpha ( opacity ) value.

Thread Starter evabo
(@evabo)

5 years, 3 months ago

Thank you so much, David. That works really well!
All problems solved 🙂

Plugin Support David
(@diggeddy)

5 years, 3 months ago

You’re welcome

Thread Starter evabo
(@evabo)

4 years, 12 months ago

Hi, this is Eva again. I successfully used the given options to change backgrounds. Now I am trying this for another web site, but I can’t get it working. Would it be possible for you to take a look? I only want to change the background of the last block for mobile…
How can I send you the link?

Thank you!
Eva

Elvin
(@ejcabquina)

4 years, 12 months ago

Hi Eva,

You can send the details here – https://generateblocks.com/support/

While waiting:

If your site is using a caching plugin, can you try purging/clearing plugin’s cache and the browser’s cache and check again to see if it finally applies?

Thread Starter evabo
(@evabo)

4 years, 12 months ago

Thank you! I cleared the browser’s cache on my cell phone and tried it, no luck… Now I am waiting for my account at gererateblocks.com/support to be approved 🙂
Thank you so far!

Elvin
(@ejcabquina)

4 years, 12 months ago

You can use the form on the link provided (pre-sale tab) – https://share.getcloudapp.com/7Kuo0NGl – so you won’t need to register. 🙂

Thread Starter evabo
(@evabo)

4 years, 12 months ago

Hey!
I already registered ans posted my question again 🙂
Thanks!

Thread Starter evabo
(@evabo)

4 years, 11 months ago

Hi!
I manages to solve my problem! Like this:
`@media(max-width: 768px) {
.gb-container.mobile-hero-image,
.gb-container.mobile-hero-image:before {
background-image: url(‘the_full_url_for_your_mobile_image’);
background-size: contain;
background-repeat: no-repeat;/* set background sizing */
/* Remove fixed background if present */
background-color: #829D93;
}
}
And now it looks exactly like I wanted 🙂

Best!
Eva

Plugin Author Tom
(@edge22)

4 years, 11 months ago

Awesome, thanks for letting us know! 🙂