coding section to display 50% image 50% text

Solved
Highlighted
Excursionist
53 1 0

Hi,
Does anybody know what code I would use to create a section similar to the image attached?
Where the image takes up 50% of the screen and the text takes up 50%?

 

Thanks

 

Screen Shot 2019-11-20 at 7.52.32 am.png

0 Likes
Navigator
338 37 37

@kiradullard wrote:

Hi,
Does anybody know what code I would use to create a section similar to the image attached?
Where the image takes up 50% of the screen and the text takes up 50%?

 

Thanks

 

Screen Shot 2019-11-20 at 7.52.32 am.png


section image with text can work like this, only issue is your theme may have margin-padding around it so may leave space.

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Expert
2220 376 465

Hi @kiradullard 

Add this code to make section like you want:

Add bellow html where you want to add this design

<div class="flex-cont">
<div class="boxx"><img class="box_img" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg"></div>
<div class="boxx box_img_div"><h1>Title Boxes</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

Add this css in Asset->theme.scss file at bottom:

<style>
.flex-cont{ display: flex; } 
.flex-cont .boxx { width: 50%; text-align: center; font-size: 18px; }
.box_img{width:100%;}
.box_img_div{ background-color: #f1f1f1; padding: 5px; } </style>

it look like:

image section.png

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
53 1 0

@Jasoliya thankyou this works but I'm wanting to add in code for sections on the front end so that my client can change the image or text themselves if they need to in future. Basically, create an image with text section they can add on the front end but with the specific styling.

 

 

0 Likes
Shopify Expert
2220 376 465

Then you can use image with text section if you have in theme. if you want to make this given html dynamic as section then we have to code it custom. cant send you code because it not just one line.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

Hello ,

Please follow below steps so that your client can change the image or text themselve..

1. Go to Online Store->Theme->Customize

2019-11-20_14-24.jpg

 

2019-11-20_14-26.jpg

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Excursionist
53 1 0

@oscprofessional hi there, I currently have the image and text added on the theme but I wanted to style it to add a background colour and have the image take up 50% of the page (remove all the padding). When I add image and text section this is what it currently looks like (see image attached)

 

Screen Shot 2019-11-20 at 9.07.09 pm.png

0 Likes

Hello,

Please Provide your site url so that I will check and give you exact solution

 


@kiradullard wrote:

@oscprofessional hi there, I currently have the image and text added on the theme but I wanted to style it to add a background colour and have the image take up 50% of the page (remove all the padding). When I add image and text section this is what it currently looks like (see image attached)

 

Screen Shot 2019-11-20 at 9.07.09 pm.png


 

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Excursionist
53 1 0

@oscprofessional much appreciated the URL is 

https://honey-bones-au.myshopify.com/password

Password: honeybones0810

 

The page is under "About", "Sustaiabilty"

 

Thankyou!

0 Likes

Hii..

You want it in below format

2019-11-20_16-21.jpg

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss

 

Please remove below css

.feature-row__text {
	min-width: 43%;
	-ms-flex: 0 1 43%;
	flex: 0 1 43%;
	padding: 0;
}
.feature-row__item {
	-ms-flex: 0 1 57%;
	flex: 0 1 57%;
	margin: 0 auto;
}

Please add below css

@media only screen and (min-width: 1550px) {
 .feature-row {
  margin:0;
 }
}

@media only screen and (min-width: 769px) {
 .feature-row__text--left {
  padding-right:0;
  padding-left:0;
 }
}
.feature-row {
	align-items: normal;
}
.feature-row__item {
	-webkit-flex: 0 1 50%;
	-moz-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
}
.feature-row__item.feature-row__text {
	background-color: #ccc;(Change this color as per your requirement)
}
.feature-row__item.aos-init.aos-animate {
	max-width: unset !important;
}
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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes