Docs

[Rue Nel]

Hey Garet,

Is this enough?

I have modified your code and have this:

@media (min-width: 1200px) {
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
  }

  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 24%;
  }
}

@media(max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 0 !important;
    padding: 0 10px 10px !important;
  }
}

/*@media(max-width: 767px){
  body #x-iso-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}*/

Please let us know if this works out for you.

[pkingco]

Hi Rue,

I realize all support is being moved to the support page now, but I didn’t know how to access open topics, so I made my way back here. Sorry if this is the wrong place. Please direct me to the appropriate avenue if this is wrong.

But on to the support at hand.

With the above code you have indeed fixed the alignment issue… but the original issue is now back.

I’ve added a hover link to my portfolio gallery, to mimic what I have on the “recent posts” section on my home page.
A Transparent orange overlay with the title and icon appearing upon hover.
Currently the orange exceeds the image border on sides and bottom

Any ideas on how to keep the alignment you have recently corrected, as well as isolating the orange hover to within the image borders?

Thanks

Garet

[Christopher]

Hi there,

Please find this code :

@media(max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 0 !important;
    padding: 0 10px 10px !important;
  }
}

and update it to :

@media(max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 0 !important;
    padding: 0 !important;
  }
}

Hope it helps.

[pkingco]

Hi Christopher,

Thanks for the response. Unfortunately this brought me right back to the issue I was having early on in this string of support (page 1). I think there was some confusion due to the length of this string. So anyway I dug into the assistance I received previously, and through that, and some meddling on my end, I believe I have achieved what I had set out to do. I used this code below.

@media (min-width: 1200px) {
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0px !important;
  }

  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 24%;
  }
}

@media (max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0px !important;
  }

  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 32%;
  }
}

@media (max-width: 979px){
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0px !important;
  }

  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 48.70%;
  }
}

@media (max-width: 767px){
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0px !important;
  }

  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 100%;
  }
}

This allowed me to have centered images, white space between them, and a hover that didn’t extend beyond the image boundaries.

If this looks wacky please let me know.

If not and it seems correct, I just wanted to say thanks for all the help and keep up the great work guys!!

Cheers

Garet

[Rad]

Glad it’s okay now and thanks for sharing 🙂

[Author]

Posts