Banner Image Text for Mobile and Tablet (Main Homepage)

Sorry, sent with out completing.

Sub title (main text in the middle): Welcome to ecoPlating UK

Description: Specialising in 24K Gold Electroplating Products & Services

Can the text be also enlarged a bit on the tablet version? Just to clarify, this is for the mobile and tablet version as they don’t appear in the centre.

Thank you.

Hi, willmorcos

To do this, Go to Appearance >> Customize >> Additional CSS and add the given below custom CSS code:

@media only screen and (max-width: 480px) and (min-width: 200px){ 
	.slide-text-bg3 p {
		display: block !important; 
	}
	.flex-slider-center {
		top: 14% !important; 
	}
}
@media only screen and (max-width: 1200px) and (min-width: 960px){
	.flex-slider-center { 
		top: 42% !important;
	}
}
@media only screen and (max-width: 959px) and (min-width: 768px){ 
	.flex-slider-center {
		top: 28.5% !important; 
	}
}

I hope it will work for you!

Thanks
Rishabh

Hello

Thank you for your reply. Unfortunately this did not work for me on this occasion. The following changes occurred:

Laptop version – the text moved down. I happy with the original position and so would not want this to change.

Tablet version – no change at all.

Mobile version – the Description: Specialising in 24K Gold Electroplating Products & Services appeared but was too big and out of line.

Look forward to receiving your next suggestion.

Thank you.

You said you want to enlarge the content on mobile and tablet devices so I have given CSS for this. Can you please more clear by screenshot what exactly you want?

Please find below screenshot links for how the main home page is viewed without the new custom css BUT have added notes to show you what I would like:

Tablet
Tablet view with requested changes

Mobile
Mobile view of home page

Can the Description: Specialising in 24K Gold Electroplating Products & Services be added on the Mobile version but not oversized or too big.

Please do not change the laptop version as I am happy with the layout.

Thank you.

Add the given below custom CSS code in the Additional CSS box:

@media only screen and (max-width: 480px) and (min-width: 200px){ 
	.slide-text-bg3 p {
		display: block !important; 
		font-size: 11px !important; 
	    line-height: 16px !important;
	}
	.slide-text-bg3 {
	padding: 5px 10px 5px !important;
}
	.flex-slider-center {
		top: 16% !important; 
	}
}
@media only screen and (max-width: 1200px) and (min-width: 960px){
	.flex-slider-center { 
		top: 42% !important;
	}
}
@media only screen and (max-width: 959px) and (min-width: 768px){ 
	.flex-slider-center {
		top: 29.5% !important; 
	}
}

You can change the values as per your need.

I hope this time it will work for you.

Thanks
Rishabh

Hello Rishabh

Thank you for the detailed custom css. I have added this and it has worked.

Last question is how do I increase the overall size of the text on mobile version in the banner. Are you able to provide me with custom css that I can experiment with?

Thanks again.

To increase the size of the texts on the mobile version in the banner, add the given below custom CSS code in the Additional CSS box:

@media only screen and (max-width: 480px) and (min-width: 200px){ 
	.slide-text-bg1 h2 {
		font-size: 13px !important;
	}
	.slide-text-bg2 h1 {
		font-size: 16px !important;
	}
	.slide-text-bg3 p {
		font-size: 12px !important;
	}
}

You can change the values of the font-size as per your need.

I hope this time it will work for you.

Thanks
Rishabh