1

I've been working on this social wall I'm making for a project and I'm stuck with some CSS issues. As I understood from what I've tried it seems that WordPress has its own <div>s and padding on the themes. I would love to know how to override or remove them.

.social-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr)); /* Adjust column width as needed */
    gap: 20px; /* Adjust the gap between posts */
    width: 100vw; /* Reduce width by twice the gap value */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0; /* Reset padding */

}
.entry-content .wp-block-post-content .has-global-padding .is-layout-constrained .wp-block-post-content-is-layout-constrained {

    display: none;
}

.social-wall .youtube-video,
.social-wall .ig_post_container {
    width: 100%; /* Set the width to fill the grid cell */
    margin: 10px 0; /* Adjust margin as needed */
}

/* Adjust styles for the embedded content */
.social-wall iframe,
.social-wall img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Style for the Instagram post container */
.social-wall .ig_post_container {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

/* Style for the Instagram post details */
.social-wall .ig_post_details {
    margin-top: 10px;
}

/* Style for the "View on Instagram" link */
.social-wall .ig_view_link a {
    color: #3897f0; /* Instagram brand color */
    text-decoration: none;
}

/* Style for the Twitch video container */
.social-wall .twitch-video {
    width: 100%;
    margin-bottom: 20px;
}

I'm using this CSS for the WordPress. The results I'm getting here are: enter image description here

the Twitch and YouTube being small isn't the the problem here. It is that my shortcode, for some reason, starts in the middle and just goes to the right from there. I also checked and inspected the WordPress site and found out :enter image description here

There are lots of div elements where my social wall div is put on the bottom as I understood it. So I probably assume it's the WordPress theme that's causing the issue (not 100% sure). I tried with a blank theme but with no help or probably I did something wrong there as well.

3
  • Have you explored your browsers debug tools? You can temporarily edit and remove styles from any class to work out what you need to do.
    – Rup
    Feb 15 at 13:27
  • 3
    This is really just a CSS question, and WordPress isn't super relevant. Browser dev tools give you all the information you need to work with CSS, and the process for resolving the conflicts would be the same no matter what CSS or framework you're using. In your case the problem is just that your CSS is wrong for your goals. You have your social wall inside an element with a constrained width of some kind, but you're setting your element's width to 100vw, so it's overflowing its container. Feb 15 at 14:04
  • As @JacobPeattie says, you have your width forced to 100vw (view width) and even have a comment that states the opposite width: 100vw; /* Reduce width by twice the gap value */ - not sure how you're reducing the width at all by instructing it to be 100 view width. Try adjusting that to 100% instead. Without being able to troubleshoot the results it's hard to tell what other CSS your theme is injecting here that's fighting against what you're trying to do. Feb 15 at 14:37

0

Browse other questions tagged or ask your own question.