Closing gap between content blocks (Athens Theme)

Store Design
,
1

I have an Ada IQ Slider next to a custom content block on the front page of my site. The gap between them is very large. I cannot seem to figure out how to bring them closer together. Any help is greatly appreciated.

https://qmdirect.com/

-Danny

2

I tried to take a look, but your store is password protected.

3

itsahg

4

Once the custom block is moved closer to the slider it leaves a lot of white space to the right of the custom block (or to the left of the slider if you move the slider towards the custom block). Is that how you want it or do you want them both centered?

5

I was hoping to have them centered.

6

Replace the internal CSS that’s in that section with the below:

.section {
      clear: both;
      padding: 0px;
      margin: 0 px;
    }
    .group {
      font-size: 0; /* Fix for inline-block whitespace */
      text-align: center;
    }
    .col {
      display: inline-block;
      margin: 1% 0 1% 1.6%;
      vertical-align: top;
      font-size: 16px; /* Reset font size */
      box-sizing: border-box;
    }
    .span_2_of_3 {
      width: 59.13%;
    }
    .span_1_of_3 {
      width: 32.26%;
    }
    @media only screen and (max-width: 480px) {
      .span_2_of_3,
      .span_1_of_3 {
        width: 100%;
      }
    }

That produces the following result:

JoltRob_0-1680552993528.png
JoltRob_0-1680552993528.png1741×1120 397 KB

You may need to make some additional modifications for mobile screens.

7

Thank you for this. However it doesn’t close the gap. It did center it though. I replaced the code as described. I’m not sure what is wrong.

8

Sorry I forgot to mention you also need to remove “float: right” from the inline styling for the custom block. That’s what’s creating the gap.

JoltRob_0-1680554156354.png
JoltRob_0-1680554156354.png624×179 6.73 KB

9

You are amazing! Thank you so so much!!!