resize multiple link-blocks venture theme

Solved
ImDedi
Excursionist
43 1 10

Hi,

Does anybody know how you modify your CSS so that you can have all of your linkblocks on the same row?

Also I would like to have the Icons in their natural size (64x64px) , would this be possible to readjust the size of the link block to 64x64px?

my website: https://www.imdedi.com

this is how it looks atm....

 

ImDedi_0-1610979943351.png

 

KetanKumar
Shopify Partner
13991 1634 5021

@ImDedi 

Thanks 

it's fine look at this?

KetanKumar_0-1610983769582.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ImDedi
Excursionist
43 1 10

Hi,

 

Exactly what im looking for!

ImDedi
Excursionist
43 1 10
0 Likes
KetanKumar
Shopify Partner
13991 1634 5021

This is an accepted solution.

@ImDedi 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-1610978125cd8926d1  {
.medium-up--one-quarter {
    width: 14%;
    -ms-flex-preferred-size: 14%;
    -webkit-flex-basis: 14%;
    -moz-flex-basis: 14%;
    flex-basis: 14%;
    padding: 10px;
@media only screen and (max-width: 749px){
width: 50%;
    -ms-flex-preferred-size: 50%;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    flex-basis: 50%;
}
}
.link-block {
background-repeat: no-repeat;
    padding: 40px 10px;
    background-size: contain;
&::after {
opacity: 0;
}
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ImDedi
Excursionist
43 1 10

@KetanKumar This worked perfectly, thank you!

Do you also know how to change it so the text goes below the image instead of on it..

0 Likes
ImDedi
Excursionist
43 1 10

@KetanKumar I did this and then I changed it so the new link-blocks were ontop of the page instead.

This created a very ugly margin, see picture for reference.

I have edited the code so it looks OK, but far from good...

Could you help me remove the red squared things in the picture? (on mobile, it works fine on desktop)

 

#shopify-section-1610978125cd8926d1  { 
.medium-up--one-quarter {
    width: 10%;
    -ms-flex-preferred-size: 14%;
    -webkit-flex-basis: 14%;
    -moz-flex-basis: 14%;
    flex-basis: 14%;
    padding: 10px;
@media only screen and (max-width: 749px){
width: 50%;
margin-top:20%;
    -ms-flex-preferred-size: 14%;
    -webkit-flex-basis: 14%;
    -moz-flex-basis: 14%;
    flex-basis: 14%;
  
}
}
.link-block {
  margin-top:-20px;
background-repeat: no-repeat;
    padding: 0px 2.5px;
    background-size: contain;
&::after {
opacity: 0;
}
}
}

139978867_151731229902748_1187350229754703671_n.jpg

 

KetanKumar
Shopify Partner
13991 1634 5021

@ImDedi 

i can see look fine

KetanKumar_0-1611024139629.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes