home page / juice page / future buckets.

[rohgepresst]

I recently was assisted to fixed the single column products on my home and product page to show double on mobile…. Unfortunately it did not solve the problem with the image banners on both the home page and each juice page.

is there a way to fix the cut off type, and buttons?

The buckets should not be separated by a space and the type should not intersect the main image… if you scale the browser to 520px. these buckets should look like this on mobile.

is there a way to ensure that that this doesnt happen in the future?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Have you added a min-height to those image blocks? That looks to be causing the white space.

The customisations you are doing to the theme would ideally need to be done by a web developer as some are complex.

Here is the code that will answer your query:

Homepage Example – Improve Text / Remove whitespace

@media only screen and (max-width: 479px) {
	.home .image-banner-content.content-left {
		padding-right: 0!important;
	}	
	
	.home .spb-row-container.spb-row-full-width.remove-element-spacing .spb_content_element {
		min-height: 100%!important;
	}
	
}

You will need to modify this CSS to match your different pages as mentioned in previous tickets.

Thanks.

Attachments:

You must be logged in to view attached files.

[rohgepresst]

And will I have to switch the code with the page ID for each page that contains these blocks? or is this a global fix?

thanks guys

[David Martin – Support]

Hey,

You can do that or if you remove .home it would take a global effect. Making global changes is not really a great idea though, keeping it page specific is safer.

Thank you.

[rohgepresst]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

The problem is that it needs to have more height in mobile or else the title above will be cropped. Try to increase the height a little bit.

-Rui

[rohgepresst]

How would I do this….

I have broken them twice…

[Rui Guerreiro – SUPPORT]

In Atelier using the page builder you can have specific elements that only show in a specific device.

Can you post you site url and admin credentials?
Try to do it in the initial form of the topic.

-Rui

[rohgepresst]

I rather not because the page is in another language and sometimes the languages switches…

where can i find the page builder and how would i go about giving these buttons a bit more height.

i am also using this widget on a few different pages throughout the site.

[Rui Guerreiro – SUPPORT]

check the Rows available in the Layout dropdown.

Then inside the rows place the normal page builder content, in the Row options you can set his visibility settings.

-Rui

[rohgepresst]

ahh now I understand what you are talking about.

I am not looking to turn off the image banners on mobile – I am looking at giving the button a bit more room on the bottom.

i hand resized the browser… the button and text should look like this… is there anyway to do this.

?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

You can use some CSS to amend the button position.

Ex:

@media only screen and (max-width: 479px) {
	a.sf-button.standard.accent.default.ml0 {
	  margin-top: -5px!important;
	}
}

Thanks.