Remove white box from around code snippet

Support
#1

I need to remove the white empty box around the code snippet for my gallery link on the below page:

http://www.stairsfloorsdoors.co.uk/services/door-fitting/

I’ll send login details separately.

Kind regards,

Dave

#2

Hey @davepearson,

Please add following CSS code in edit Global CSS section.

.ngg-gallery-thumbnail {
    border: none;
}

.ngg-gallery-thumbnail a {
    margin: 0px;
}

Hope this helps

Regards

#3

Hi Rahul,

This hasn’t worked. Just so you know it’s the white border around the thumbnail images and the white empty box that holds the code snippet that I’m trying to solve.

Kind regards,

Dave

#4

Hey Dave,

I have updated CSS code in your global CSS section :slight_smile:
I have added !important at end of CSS rule.

Regards

#5

Hi Rahul,

This has removed the borders from gallery thumbnails, however there is still a plain white box above the galleries where the code snippet for the gallery is held.

I have a couple more queries as well, I need to centre the images on my sidebar and also want to centre the text/images both horizontally and vertically against my service pages. You can see that some pages are nicely centred http://www.stairsfloorsdoors.co.uk/services/staircase-specialists/glass-staircases/ and some are not http://www.stairsfloorsdoors.co.uk/services/door-fitting/

The style code vertical-align: middle; & text-align: center; do not seem to work consistently, is there a better way?

Kind regards,

Dave

#6

Hello Dave,

Please add following code to make necessary changes:

.x-sidebar img {
    margin: 0 auto;
    display: block;
}

pre.x-code {
    display: none;
}

Thanks.

#7

Hi Prasant & Rahul,

Thank you for your input. This has solved the centring of the logos on the sidebar, removed the white border around the thumbnails and the white box for the code snippet so thank you for your support on these.

I also want to centre the text/images both horizontally and vertically against my service pages. You can see that some pages are nicely centred http://www.stairsfloorsdoors.co.uk/services/staircase-specialists/glass-staircases/ and some are not http://www.stairsfloorsdoors.co.uk/services/summer-houses-garden-offices/

The style code vertical-align: middle; & text-align: center; do not seem to work consistently, is there a better way to vertically centre the text within it’s respective text boxes and column when an image is larger than the text block?

#8

Hi again,

You can try adding the following code in your Customizer:

@media screen and (min-width: 768px) {
  .x-column.x-1-2 {
    display: inline-block !important;
    float: none !important;
    vertical-align: middle;
  }
}

Above code will vertically center elements for 1/2 + 1/2 columns similarly you can change the column selector to apply on other columns as well for example for 1/3 + 1/3 + 1/3 you can just change the selector.x-column.x-1-3 in the provided code.

Hope this helps!

#9

Super,

Thank you Nabeel. Worked a treat :grinning:

Kind regards,

Dave

1 Like
#10

Glad it worked.

Cheers!