How to make images take up 50% of screen

Solved
Excursionist
55 1 0

How would I make my images fill up 50% of the page as shown in the second image attached?

 

Screen Shot 2019-12-12 at 9.48.18 pm.pngScreen Shot 2019-11-20 at 7.52.32 am.png

 

0 Likes

@kiradullard,

If you want to do your homepage full-width then add below css

.template-index #MainContent .page-width {
	max-width: 100%;
	padding: 0;
}

To make image full width,add below css

@media only screen and (min-width: 1050px) {
 .feature-row {
  margin:0 !important;
 }
}
.feature-row__item div {
	max-width: 100% !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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
55 1 0

@oscprofessional  thanks for your response, theres still some padding showing on either side. I've tried removing it but this affects the nav

 

Screen Shot 2019-12-12 at 10.28.42 pm.pngScreen Shot 2019-12-12 at 10.29.58 pm.png

0 Likes

@kiradullard ,

Please add below css

.template-index #shopify-section-1575924863016 .page-width {
	max-width: 100%;
	padding: 0;
}
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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
55 1 0

@oscprofessional  thankyou I applied the same to the section underneath and now there's just one tiny gap I can't seem to get rid of



Screen Shot 2019-12-12 at 11.03.33 pm.png

0 Likes

@kiradullard,

Are you talking about below gap

2019-12-12_17-39_Antara Yoga Wear.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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
55 1 0

@oscprofessional  yes thats the one

0 Likes

Success.

@kiradullard,

add below css

.template-index #shopify-section-1575924931071 .page-width {
	padding: 0;
}
.template-index #shopify-section-1575924931071 .feature-row__item.feature-row__text.feature-row__text--right.larger-text {
	padding-left: 40px;
}
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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Excursionist
55 1 0

@oscprofessional  thankyou so much this has fixed all issues :)

0 Likes