resize multiple link-blocks venture theme

[ImDedi]

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

[KetanKumar]

@ImDedi 

Thanks 

it's fine look at this?

[ImDedi]

Hi,

Exactly what im looking for!

[ImDedi]

@KetanKumar 

[KetanKumar · 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;
}
}
}

[ImDedi]

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

[ImDedi]

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

 

[KetanKumar]

@ImDedi 

i can see look fine