coding section to display 50% image 50% text

[kiradullard]

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

[suyash1]

---

@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

---

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

[Jasoliya]

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:

[kiradullard]

@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.

[Jasoliya]

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.

[oscprofessional]

Hello kiradullard,

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

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

[kiradullard]

@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)

[oscprofessional]

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)

---

[kiradullard]

@oscprofessional much appreciated the URL is 

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

Password: honeybones0810

The page is under "About", "Sustaiabilty"

Thankyou!

[oscprofessional]

Hii..

You want it in below format

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;
}