Here is a tutorial on how to adjust or remove the gaps between photos either vertically or horizontally. At some rare circumstances, you may want to make a bigger picture out of smaller ones. The goal to this is the ability to click each smaller photo while still visualizing the bigger one. By removing the spaces or gaps on each photo, you can experiment the appearance of your images.
1. In order to teach you well, I need you to create a separate page for practicing. Just go to Weebly > Pages > Add Page > Standard Page > name it “Test 1” > just choose no header for the lay out. Finally hit “save & edit”.
2. On the left side, drag a “column” element. Hover your mouse on the top left of the column element and choose 2 columns, never mind the column spacing because our code will overrun that.
3. Now drag “image” element inside the column and should be positioned 2x2, a total of four. Upload your photos on those four slots, probably you need to use photos of the same dimension (try 200x200). Publish your site and check out the result. You may now see the gaps and it’s time to remove them.
Manual Adjusting
4. Click the first photo > set the alignment on RIGHT > spacing > all set to none. Repeat this on the photo below it. Now, for the two photos on the right side, just set their alignments to LEFT and keep all the spacing to none. Publish your site and you can still see the gaps, atleast now shorter. The next step will perfectly clear this gaps.
CSS Adjusting
5. To avoid other pages being affected by this code, please only insert on “Test 1” page. Simply go to Weebly > Pages > click the “Test 1” on the right > on the left panel click “advance settings > scroll down and on the “header code” box, paste the following codes:
<style>
.wsite-image-border-thin {
padding-left: 0 !important;
padding-right: 0 !important;
}
.wsite-multicol-col {
padding: 0 !important;
}
.wsite-image {
margin-bottom: -12px;
}
</style>
.wsite-image-border-thin {
padding-left: 0 !important;
padding-right: 0 !important;
}
.wsite-multicol-col {
padding: 0 !important;
}
.wsite-image {
margin-bottom: -12px;
}
</style>
The first two blocks of code resets the horizontal spacing between images including the column into zero. While the last one is the setting for the vertical spacing of photos. So you need to adjust the red marked text until there’s no gap visible.
When done perfectly, there will be no more gaps seen between images. And you can now apply this tutorial on the real page you want to edit, just follow each step correctly.
Noted that all elements inside the column on that page will be affected so insert text outside columns.
So what do you think for this tutorial? Is it helpful?
0 comments: