I would need help with customizing a table

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.

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. :)

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.

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. :)

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;
    }
}

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! :)

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.

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. :)

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?

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? :)

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! :)

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

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? :)

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.