Jump to content

NEED HELP URGENTLY WITHE CHECKERBOARD DESIGN

Go to solution Solved by tuanphan,

Recommended Posts

Password is website

 

I want to make a checkerboard design on my services page. I want all the pictures the same size and no gaps, as you see the bottom picture is wider than the top two how do i fix it so there's no gaps and its even thx

Link to comment
  • Solution
Posted (edited)
On 1/4/2024 at 10:11 PM, Sauceboss770 said:

ya please ill try it out

First, add 6 sections

Edit 6 sections > Add a Block > Choose Code > Paste this line

<div class="checkboard-item"></div>

 

Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.code-block .checkboard-item').closest('section.page-section').addClass('checkboard-design');
  $('section.checkboard-design').wrapAll('<section class="checkboard-design-parent"></section>');
});
</script>
<style>
            @media screen and (min-width: 768px) {
                .checkboard {
                    display: flex;
                    flex-wrap: wrap;
                }

                .checkboard section {
                    width: 33.3333% !important;
                }
            }
</style>

if it doesn't work or doesn't work properly, you can share link to page where you apply the code, I can check it again easier

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.