Debut Theme - Image with Text - Full Screen Left to Right

Solved
Highlighted
Tourist
10 0 5

Hello, I'm new to Shopify (coming from Squarespace which is a little more customizable). I have little-to-no coding experience.

I'm trying to change the 'Image with Text' section to be full-screen (meaning no empty space / padding on the left and right). I want to have a square size image next to a square shape block of text.

 

Currently looks like this:

nicoleecherii_0-1595424769115.png

 

Want it to look similar to this:

nicoleecherii_1-1595424791373.png

 

Could anyone by chance help? Many, many thanks in advance!

1 Like
Highlighted
Shopify Partner
2265 496 647

Hey @nicoleecherii,

Please share your website URL?

I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Highlighted

This is an accepted solution.

Hello @nicoleecherii 

Add this css at the bottom of

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

#shopify-section-feature-row .page-width.feature-row {
	width: 100%;
	display: block;
	overflow: hidden;
	padding: 0 15px;
	margin: 0;
	max-width: 100%;
}
#shopify-section-feature-row  .feature-row__item.feature-row__text.feature-row__text--left {
	padding: 0 15px;
	text-align: center;
}
#shopify-section-feature-row  .feature-row__item.feature-row__text.feature-row__text--left {
	padding: 0 15px;
	text-align: center;
}

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
0 Likes
Highlighted
Shopify Partner
2265 496 647

This is an accepted solution.

Hey @nicoleecherii 

Please try this css class.

add code assets/theme.scss.liquid bottom of the file

#FeatureRowImage-feature-row {
max-width: 100%;
max-height: 100%;
}

#shopify-section-feature-row .feature-row__item {
-webkit-flex: 0 1 100%;
-moz-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
}

#shopify-section-feature-row .page-width {
*zoom: 1;
max-width: 100%;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
}

 

Hope this will work for you.

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 5

Thank you so much! This is very helpful. I've inputted both sets of code you shared and it has helped to reduce the padding on the left and right sides.

 

What code would I need to alter to increase the size of the image on the left? (such that it touches the left side edge of the screen, if that makes sense)

1 Like
Highlighted
Shopify Partner
2265 496 647

This is an accepted solution.

Hey @nicoleecherii 

add code assets/theme.scss.liquid bottom of the file

#FeatureRowImage-feature-row {
max-width: 100% !important;
max-height: 100% !important;
}

#FeatureRowImageWrapper-feature-row {
max-width: 100% !important;
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 5

Hi @dmwwebartisan,

Thanks very much! This is a great solution, and I really appreciate it!

1 Like
Highlighted
New Member
4 0 0

Hi dmwwebartisan,

I also have the Debut theme and would like to remove the padding from the left and right sides of my pages. I tried putting the two codes that you gave in the bottom of my theme.scss.liquid file but it did not remove the padding on my pages. Can you please help me with this?

 

Thank you!

0 Likes