[Support request] I would need help with customizing a table

[Patrik]

Hey! I would need help with customizing a table. Is there a chance to pay you for help with it because you know how you built the theme? 🙂 I know exactly how I want it and have pictures on it. 🙂 That would make me use your theme for a looooong time with updates. 😉 🙂

[David]

Hi there,

do you have an example of the Table?
Tables can be a responsive nightmare so would be good to see what you’re trying to do and we can advise / help with the best course of action.

[Patrik]

Thank you for such a quick response! 🙂 I make a link in the first post to the page that has the table that I want. Would like to have those 3 lines with the symbols. The buttons. The images. Other color on the left side. And as it is on the phone. Yes, everything. 🙂

[David]

OK – that case we can provide some HTML / CSS to help. Question, are you using FontAwesome on your site? This is solely to decide on how best to add your icons. Let me know.

[Patrik]

It would be sooooo nice if you wanted to help me get this table. 🙂
Unfortunately, I do not have FontAwesome because i read that it is slowing down the page speed
very much. And I do not have the knowledge to do FontAwesome faster. 🙂 Hope you can insert them anyway? 🙂 I’m using Marketer. 🙂

[David]

OK, so lets try this.

1. This your HTML, you will need to update URLs, Image src etc.

<div class="teaser-block">
    <a href="link_url" class="button" title="link_title" rel="nofollow" target="_blank">
        <img src="image_url" alt="">
    </a>
    <ul class="teaser-list">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <a href="link_url" class="button" title="link_title" rel="nofollow" target="_blank">Button Label</a>
</div>

And this is your CSS:

.teaser-block {
    display: grid;
    grid-template-columns: repeat(3, auto);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #e4e4e4 !important;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    border-left: 5px solid #1663a8;
    background-color: #f2f6f9;
    padding: 8px 15px 8px 5px;
}

ul.teaser-list {
    list-style: none;
    margin: 0;
    font-size: 13px;
}

ul.teaser-list li:before {
    content: '\2713';
    font-weight: bold;
    padding: 0 8px 0 20px;
    color: green;
}

.teaser-block .button {
    text-align: center;
}

@media (max-width: 419px) {
    .teaser-block {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-row-gap: 1em;
    }
}

[Patrik]

Thanks, that means very much to me that you help me. Many thanks! 🙂

I paste it at the bottom in Customize > Additional CSS. Hope it is correct? 🙂

It starts to resemble it but not exactly. 🙂 Got an error message “Unexpected token 1fr” for “grid-template-columns: 1fr;”. Could that be the problem? 🙂

Have you saved the address I added to the post at the top (Who has the table) so I can add the website as I try it? 🙂

Many many many many thanks! 🙂

[David]

Additional CSS is correct. I generally add code at the very top. If there is a bug in any existing code then code below it can break. Once all is good i then reshuffle the code.

Ignore the 1fr error – the code checker in WordPress doesn’t parse CSS Grid. But it works.

[Patrik]

So now I have put the code at the top. 🙂

Yes exactly the website but remove the link here thanks so the owner does not think I take any idea. That’s why I did not post it my self. 🙂

Now I’ve added my own address in the first post so you can see. 🙂

[David]

Can you check in the Text editor and make sure there is no line break between the a tag carrying your image and the UL list?

[Patrik]

It’s not line break. It’s exactly like I want it when I leave the code outside of a post.. 🙂 Click on any page in the menu to see. Both in the mobile and the computer. Why does that happen do you think? 🙂

Can you delete the link you posted thanks? 🙂

[Patrik]

Can you remove the link here https://generatepress.com/forums/topic/i-would-need-help-with-customizing-a-table/#post-753926 before the page is indexed by google. 🙂 Thanks! 🙂

[David]

I am not sure what the issue is? the very top teaser block looks fine, but i would increase the @media max size to say 600px so it stacks earlier.

If you can provide a screenshot to explain

[Patrik]

Thanks for the help! 🙂

When I paste the code in content-page.php and content-singel.php it work’s. But when I paste in the code directly in the post – it not work. 🙂
Could it be the code to the button to post comments?

What is @media max size control? Try putting 600 there but nothing happened? 🙂

[David]

as i said the one added to the post content has an empty <p></p> tag after the image which is creating a 4th column causing the layout to break. You need to remove that.

I assume you are using a child theme when editing the php templates? If not you will lose these when the theme is updated.

Changing the @media setting to 600px meant that the columns would stack earlier. Without it you would notice when resizing your browser down to a smaller size the columns become to close to each other.

[Author]

Posts