Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 4, 2018 at 10:55 am #981073
    smoothbob

    Hi
    I am using images 180×180 for the flags on this page

    Our Network

    but the images are stretching to the size of the box. how can I centre them and keep them the correct size in the box?

    and I want to edit the background colour and border of the box

    thanks!

    July 5, 2018 at 3:54 pm #981646
    smoothbob

    Hi

    no response yet :)

    thanks

    July 6, 2018 at 10:53 am #981977
    Ismael

    Hi,

    Thank you for using Enfold.

    Use this css code to set the actual width of the images.

    .grid-image img {
    width: auto;
    display: block;
    margin: 0 auto;
}

    Best regards,
    Ismael

    July 6, 2018 at 2:27 pm #982070
    smoothbob

    Hi Ismael

    I added this code:

    .grid-image img {
    width: 128px !important;
    display: block;
    margin: 0 auto;
    }

    my images are 128 x128 but they are still stretching to fit.

    thanks!

    July 6, 2018 at 2:31 pm #982072
    smoothbob

    Hi

    sorry, caching issue in chrome, it worked, but how do I make the bounding box area 128 in height as well, and edit the background colour?

    thanks!

    July 8, 2018 at 11:48 am #982672
    smoothbob

    Hi

    Our Network

    I am only trying to target specific portfolio grids as it was affecting the whole site.

    I have given the portfolio grid a custom css name of “continents”

    this is my code so far – I am trying to have the icons smaller in the space and SQUARE – I tried using a png 227×227 transparent dimensions but it ignores this
    ALSO I am trying to remove the background and add a line border

    .continents {
    .grid-image img {
    height: 160px !important;
    display: block;
    margin: 0 auto; }

    .attachment-portfolio_small size-portfolio_small wp-post-image
    {background-color:transparent !important; }
    }

    thanks!

    July 9, 2018 at 2:46 am #982909
    Ismael

    Hi,

    Thank you for using Enfold.

    The previous css code should have worked. Please try these to remove the background and borders.

    .continents .grid-image img {
    width: auto;
    display: block;
    margin: 0 auto;
}

.continents article.main_color {
    background: transparent;
    box-shadow: none;
    border: 0;
}

    Best regards,
    Ismael

    July 11, 2018 at 2:56 pm #984238
    smoothbob

    Hi

    very close thanks, but as you can see it is cutting off the top and bottom of the image, is that fixable?
    http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/icon.png

    and how can I add a border to the {square) image icon

    thanks!

    July 12, 2018 at 3:15 am #984427
    Ismael

    Hi,

    The American flag is much larger compare to the rest of the flags. (see private field)

    What do you mean by “{square) image icon”?

    Best regards,
    Ismael

    July 12, 2018 at 11:37 am #984632
    smoothbob

    Hi

    this is what I am trying to do. but the actual icon bounding box is rectangular and it cuts off the image

    http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/icons.png

    thanks!

    July 13, 2018 at 10:05 am #985075
    Ismael

    Hi,

    You can apply the border using css. You don’t have to add it to the image directly. 

    #top .continents .isotope-item {
    border: 1px solid #ffffff;
    padding: 20px;
    margin-right: 10px;
}

#top .continents .grid-image img {
    width: auto;
    display: block;
    margin: 0 auto;
}

    Best regards,
    Ismael

    July 13, 2018 at 10:56 am #985104
    smoothbob

    perfect, thanks!

    July 15, 2018 at 7:14 pm #985709
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Grid portfolio thumbnails’ is closed to new replies.