Image with text overlay - Text on the right side

Solved
Highlighted
Tourist
10 0 2

Hello Shopify team, currently we own this Shopify store:

https://primmaverastore.com/

Below our collection gallery we have this image with text overlay, linked to our Instagram accounts:

Redes sociales Primmavera.jpg

 

Is it possible to have the text aligned to the right and with black color? How can I modify the font size? I want it to be smaller. Important: We want this customization just for this image in the main page, without affecting the other hero images we have.

 

Thanks a lot for your help and support.

0 Likes
Highlighted
Shopify Partner
276 28 53

Hi,
add below code in css file at end of file

#Hero-1594268751169 .mega-subtitle{
    text-align: right;
}
#Hero-1594268751169 .mega-subtitle a{
    color: #000;
}
If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
Give a try to Shopify APP: https://apps.shopify.com/short-track
1 Like
Highlighted

This is an accepted solution.

Hello @jjcastillot 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

@media only screen and (min-width: 750px) {
#Hero-1594268751169 .hero__inner .h1.mega-title {
	color: #000;
	text-align: left;
}
#Hero-1594268751169 .text-center .mega-subtitle {
	max-width: 80%;
	padding: 0;
	margin: 0 auto;
	text-align: left;
}
#Hero-1594268751169 .page-width.text-center {
	float: right;
	width: 55%;
}
}

 

Tu tienda – Primmavera.jpg

Changes looks like attached screenshot please check....

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 2

Hi OCS, this worked pretty well for me in the desktop version of the webpage, but in mobile the text still being center-aligned. How can I align it to the right in the mobile-version also? How can I modify the font size in this image?

 

Thanks a lot.!

0 Likes
Highlighted

@jjcastillot,

For mobile you can add below code

Repalce below code

@media only screen and (min-width: 750px) {
#Hero-1594268751169 .hero__inner .h1.mega-title {
	color: #000;
	text-align: left;
}
#Hero-1594268751169 .text-center .mega-subtitle {
	max-width: 80%;
	padding: 0;
	margin: 0 auto;
	text-align: left;
}
#Hero-1594268751169 .page-width.text-center {
	float: right;
	width: 55%;
}
}

with

#Hero-1594268751169 .hero__inner .h1.mega-title {
	color: #000;
	text-align: left;
}
#Hero-1594268751169 .text-center .mega-subtitle {
	max-width: 80%;
	padding: 0;
	margin: 0 auto;
	text-align: left;
}
#Hero-1594268751169 .page-width.text-center {
	float: right;
	width: 55%;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes