A Digital Drama of Vanishing Icons

HTML-CSS
1

I have this following bit of code:

body {
            margin: 0;
            background-color: #cccccc;
        }

        table {
            border-spacing: 0;
        }

        td {
            padding: 0;
        }

        img {
            border: 0;
        }

        /* Wrapper */
        .wrapper {
            width: 100%;
            table-layout: fixed;
            background-color: #cccccc;
            padding-bottom: 60px;
        }

        /* Main Content */
        .main {
            background-color: black;
            margin: 0 auto;
            width: 100%;
            max-width: 600px;
            border-spacing: 0;
            font-family: Arial, Helvetica, sans-serif;
            color: #171a1b;
        }
        .two-columns {
    text-align: center;
    font-size: 0;
}

.two-columns .column {
    width: 50%; /* Set width to 50% to ensure both columns occupy equal space */
    display: inline-block;
    vertical-align: middle;
    width: 180px; /* Set width to match the width of the logo */
    display: inline-block;
    text-align: center; /* Center the content horizontally */
    max-width: 300px;

}

/* Additional CSS to ensure social media icons align vertically */
.two-columns .column:last-child {
    text-align: right; /* Align social media icons to the right */
    margin-top: -5px; /* Add margin to lift the social media icons up */

}

        /* Social Button */
        .btn:hover {
            color: white;
            opacity: .8;
            transform: scale(1.02);
        }

.image-cell {
    padding: 0;
}

.banner-container {
    text-align: center; /* Center content horizontally */
    margin-top: -60px; /* Adjust this value as needed to remove the space */
}

    </style>
</head>

<body>
    <center class="wrapper">
        <table class="main" width="100%">
            <!-- TOP BORDER -->
            <tr>
                <td height="8" style="background-color: white;"></td>
            </tr>

            <!-- LOGO SECTION -->
            <tr>
                <td>
                    <table width="100%">
                        <tr>
                            <td class="two-columns">
                                 
                                <table class="column">
                                    <tr>
                                        <td>
                                            <a href="https://dbo-events.co.il/%D7%94%D7%A9%D7%9B%D7%A8%D7%AA-%D7%%D7%99%D7%95%D7%93-%D7%9C%D7%90%D7%99%D7%A8%D7%95%D7%A2%D7%99%D7%9D-%D7A6%91%D7%A0%D7%AA%D7%A0%D7%99%D7%94/">
                                                <img src="Salford & Co..png" alt="luxury logo" width="180" title="luxury logo">
                                            </a>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td class="social-media" text-align: center;>
                                         
                                         <a href="#"><img src="1.png" alt="" width="30px"></a>
                                            <a href="#"><img src="2.png" alt="" width="30px"></a>
                                            <a href="#"><img src="3.png" alt="" width="30px"></a>
                                            <a href="#"><img src="4.png" alt="" width="30px"></a>
                                            <a href="#"><img src="linkedin.PNG" alt="" width="30px"></a>

                                        </td>
                
                                    </tr>
                                </table>

                            </td>
                        </tr>

                        <tr>
                            <td style="background-color: white; padding: 10px 0;">
                                <table class="column" width="100%">
                                    <tr>
                          
                    </table>

                </td>
            </tr>
        </table>

Problem is, the social media icons aren’t showing on the page.
I wanted them to be on the black square, but they just vanished…

2

Can you point out where would you expect the social media icons and what code is that?

your code doesn’t allow for reproduction of the issue. Do you have maybe a github repo with your code and the images?

3

I wanted the social media icons to be on the logo section. The code is for an HTML email template.
I don’t have a github repo with the code and the images.

4

image
image737×321 2.5 KB

Is this how you want your images to be on your page?
The images should be working as long as the src link of the image is valid.

5

I want the social media icons to be in the top section, below the logo picture.
At the bottom there is only one picture for now.
The src is undoubtedly valid.

6

This is a bit confusing to me. What is the “top section”? The only thing I see in the top is the logo image, but you also said you want the icons to be below the logo, which they currently are. Do you mean to say you want the icons to sit on top of the logo, near its bottom?

I will say that I find the nested table you have set up to be a bit odd for displaying a logo and some links. My honest suggestion would be to rethink your approach for structuring this. Perhaps put both sections inside a single <div> and make the logo a background-image of that div. You don’t have to do it that way, it’s just how I would start to approach it, if I’m even understanding what you are wanting it to look like.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.