Supply Theme Image Grid Page

Highlighted
New Member
17 0 0

Hi... 

 

I was using Brooklyn but I have just changed to Supply as it offers a better footer menu setup and fits better with what I need. 

 

I had a custom page set up on Brooklyn but after copying the code over it didn't work the same. Here is the page as it stands:

 

https://assetfinancearena.co.uk/pages/meet-the-team

 

For the main image grid area below the page title it's currently using:

 

<div class="grid grid-item">

Then each image/text grid item has:

 

<div class="grid__item large--two-fifths left">

 

<div class="grid__item large--two-fifths right">

Obviously Left is the first image and Right is the second, then this repeats for the other two images below.

 

Now the issue I have is that the right images, aren't actually all the way to the right alignment of the website edge, there's about a centimetre gap. On a Desktop it's not a deal breaker but on Mobile you can see all the images are left aligned.

 

How can I get them using the website width? It's looks like it's just something to do with the first Grid command?

 

________________________

 

The second issue is the space in the middle of the left/right images is bigger than I hoped and it makes the images smaller than I wanted them.

 

I'm guessing this is related to the two-fifths part of the code. What else can I use?

 

0 Likes
Highlighted

Hello @thelawnsonline ,

Instead of using

<div class="grid__item large--two-fifths left">

use

<div class="grid__item large--one-half left">

replace class large--two-fifths with large--one-half.
and add this CSS in theme.scss.liquid file

#meet-the-team .large--one-half{
padding : 0 20px;
}

Your page is look like
Meet the Team – Asset Finance Arena.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
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
Highlighted
New Member
17 0 0

Thanks, I already tried the one-half but couldn't sort the padding out. @oscprofessional 

 

That does't work for me as it moves the main logo over also and the images are still not moved over to the right edge.

0 Likes
Highlighted

@thelawnsonline,
Can you please share a screen of requirements , what is your exact requirement?

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
Highlighted
New Member
17 0 0

Screenshot 2020-01-23 11.17.30.png

 

As per the red lines. And with a small white space between the image centres, thank you!

0 Likes
Highlighted
New Member
17 0 0

@oscprofessional  Did you manage to look at this one?

0 Likes
Highlighted
New Member
17 0 0

Can anyone help with this? 

 

@oscprofessional 

0 Likes