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

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

Home Forums Support I would need help with customizing a table

Viewing 15 posts - 1 through 15 (of 41 total)
  • Author
    Posts
  • #752394
    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. πŸ˜‰ πŸ™‚

    #752651
    David
    Staff
    Customer Support

    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.

    #752926
    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. πŸ™‚

    #752989
    David
    Staff
    Customer Support

    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.

    #753462
    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. πŸ™‚

    #753647
    David
    Staff
    Customer Support

    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;
        }
    }
    #753900
    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! πŸ™‚

    #753926
    David
    Staff
    Customer Support

    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.

    #753945
    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. πŸ™‚

    #753968
    David
    Staff
    Customer Support

    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?

    #753983
    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? πŸ™‚

    #754028
    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! πŸ™‚

    #754060
    David
    Staff
    Customer Support

    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

    #754312
    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? πŸ™‚

    #754464
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 41 total)
  • You must be logged in to reply to this topic.