Venture theme - how to make multiple link blocks bigger

Solved
Highlighted
Excursionist
46 0 2

Hiya, 

 

Does anybody know how to make the multiple link blocks bigger please? 

 

My website is www.devti.co.uk

 

For ref: 'gifts for her' and 'gifts under £30' are multiple link blocks on my homepage.

 

Everything else is a slideshow

 

Id like them to all be similar size if that possible!

 

Thanks so much, 

Aneesha

0 Likes
Highlighted

Success.

Astronaut
1119 150 288

Go into your theme.scss.liquid and ctrl + f and look for ".link-block".

 

Should see a style like this:

 

.link-block {
    position: relative;
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    flex: 1;
    background-size: cover;
    background-position: top center;
}

Change the first pixel value of padding to something higher, whatever you want:

 

.link-block {
    position: relative;
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 200px 20px; // changed top and bottom padding to 200px
    text-align: center;
    flex: 1;
    background-size: cover;
    background-position: top center;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Excursionist
46 0 2

Thank you!

0 Likes
Highlighted
New Member
10 0 0

I am trying to include different boxsizes which vary from desktop to smartphone.
The code only focussess on one generale size no matter what device is used.
The boxes look great on the desktop but are too big on the smartphone.
How can I change the code in a way so that it adjusts the size according to the used device?

Thanks in advance.

0 Likes
Highlighted
Astronaut
1119 150 288

use a media query to reassign the padding based on a certain screen width. A common breakpoint is 768px

@media (max-width: 768px){
.link-block {
    padding: 75px 20px;
}
}

This will have to be lower in the CSS file than the original style set, and says "for any screen smaller than 768px, apply this style instead" So mobile would have 75px padding on top and bottom and 20px left and right on mobile, and 200px top and bottom and 20px left and right on destkop

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes