Make multiple images full-width for an About page? Debut theme.

coff001
Tourist
32 0 1

Hello, I want to make my images full width for my page, but while I'm in the page editor, there is no option to make any inserted images take up the full width, there's always white space. Changing the spacing when double clicking the images doesn't help either. 

I want this done for the (supposedly should be) full-width images as people scroll down the about page, like what Apple does on their site. 

Let me know how, thanks!

0 Likes

Hi,
Please share your store URL with password (If Needed) & Screenshot, So that I will give you proper solution here !

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
coff001
Tourist
32 0 1

Link: https://amourfatale.co/pages/samplebrandpage

Password: aiclai

 

See below, images are big but don't go full width. I want to make sure this works with images that aren't naturally full width either, by scaling the image up until it is full width, if necessary. These images may not be the best but its a sample I just threw up.

notFullWidthIMages.JPG

 

0 Likes
.template-page .rte img {
    width: 100%;
}
.template-page .grid__item.medium-up--five-sixths.medium-up--push-one-twelfth {
    width: 100%;
    left: auto;
}
.template-page .page-width {
    padding: 0;
    nax-w: initial;
    max-width: initial;
    margin: 0;
}


Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

@coff001  Are you comfortable with theme code edit?

If you have some difficulty add me(love.shopify25@gmail.com) as your staff and I will implement your requests for free.

I only want Like and Accept Solution.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on n.turovskyi@gmail.com regarding any help
0 Likes
coff001
Tourist
32 0 1

@oscprofessional, tried the code and it worked but what about being able to exclude specific images from this? For example, if I added a small 150*150px logo at the bottom and don't want that to stretch, but remain at its own size.

 

0 Likes
coff001
Tourist
32 0 1

Also, @oscprofessional, the code is making my text look ugly in terms of it having no spacing around it - the first letter of a sentence touches the side of the browser window. Can I get a fix for that too? Thanks.  See below to see text touching. This is happening to all my pages now.

 

uglyText.JPG

0 Likes

Hi,

You can use logo l 150*150px size, with different class. it will not stretch.

For the text please add class first then I will give you css.
can you send me the code of about us page?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
coff001
Tourist
32 0 1

I'm not sure how to add a different class so please let me know how to.  As an example, on the below link, the lipstick kiss at the bottom should be 150*150px.

Please also let me know how to add spacing around the text so that the text doesn't touch either side of the browser, it's not easy to read like that, thanks. This is a problem on all pages, not just the brand ones.

 

The temporary brand page is here: https://amourfatale.co/pages/branddd

 

0 Likes