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

[Tom]

So just to confirm, the only thing that’s missing now is the size/alignment of the button, correct?

Let me know – should be an easy fix 🙂

[Patrik]

Yes exactly. 🙂

[Tom]

Try adding this:

.teaser-block p {
    margin: 0;
}

.teaser-block .button {
    width: 100%;
    box-sizing: border-box;
}

[Patrik]

Unfortunately it does not work either. 🙂 What do you think might be wrong? Does it clash with Gutenberg? I have never encountered this problem and I have written in wordpress for over 10 years. 🙂 Its a </p> next to the picture and a <p> text to the button. 🙂

EDIT:
Tested this without success as well https://www.isitwp.com/disable-automatic-formatting/
(without knowing exactly what I do)
🙂

EDIT again:

Now I tested this at the bottom of functions.php

remove_filter('the_content', 'wpautop');

https://stampede-design.com/blog/disable-html-auto-formatting-in-wordpress/#.XBcSW89KjOQ
and
https://codex.wordpress.org/Function_Reference/wpautop

And it worked! BUT – I do not know exactly what it does. Does it ruin it for me in any way? Does it delete any code that Google like? Make the site slower? Destroy the theme or premium addition from you? I always write my posts/page in the html editor.
Do you know? 🙂

Thanks!

[David]

Hi there,

no it won’t cause any harm, you may just notice that certain elements no longer have the bottom margin (that was been added by the p tag) on them so may require you adding a line break to create some space.

[Patrik]

Thanks! 🙂

Do you mean the bottom margin under the table? 🙂 Can you control it with css? Have <br /> between the two at the top of the page and find the margin to be a bit big so would like to be able to control it if it works?. And I do not have <br /> below the table in the middle of the post. And then there is 0 marinal as you say. 🙂

Thanks!! 🙂

[David]

AutoP effects things such as IMG tags, but wouldn’t apply to the DIV being used for the table, but can just give it some bottom margin like so:

.teaser-block {
    margin-bottom: 1em; /* adjust accordingly */
}

[Patrik]

Perfect! It worked exactly as I want it! Thanks! 🙂

1. Now I noticed that the buttons are different depending on how much text is in the middle.. 🙂 And the symbols in front of the text in the middle do not really match each other either when there are different numbers of letters.. Look at my page thank you. 🙂 Do you know what to do about it? 🙂 When the text is equal, both the symbols and the button are PERFECT.

2. Then I would like to add numbers in front of the first picture like this: https://1.bp.blogspot.com/-Y9NckJ6luWA/XBjKuTOjRxI/AAAAAAAABrk/VocaTBGH2B4IksAEySj5lPiPHeWm9bKdQCLcBGAs/s1600/button-number.png But want the number next to the picture on the phone and not above. Like this https://4.bp.blogspot.com/-amwylDk7uc8/XBjOuU9ZyjI/AAAAAAAABrw/fiM0NqmkE4oIxKX1eWmquIU4Lhk4aopVgCLcBGAs/s1600/like-this.png not like this https://4.bp.blogspot.com/-syOIJmCMtVc/XBjO9m1Z3xI/AAAAAAAABr0/8JdBLNZD6uUBiLeSdUlsmlCVKN6KsNs0wCLcBGAs/s1600/no-like-this.png
And it does not have to be so much space around the number on the computer. More space for the text in the middle. 🙂

The code looks like this right now. Do you know what to add to get what I describe above? Have entered it at the top of additional css now. Is it done correctly? Does it all add a function after I changed it a little?

.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 #f57c36;
    background-color: #dde9f0;
    padding: 5px 15px 5px 10px;
	  margin-bottom: 5px;
}

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

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

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

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

Sorry if I am annoying.. 🙂 Soon I’m completely satisfied and will stop asking so much. 🙂 Will be a customer for a looooooooooong time. 😉 🙂 Thanks!

[David]

So the grid-template-columns: repeat(3, auto); property you can be more specific with the sizes. e,g:

grid-template-columns: auto auto 30%;

This will make the button always occupy 30% of the available width and the other elements auto size to fill the remaining space.

You can change your markup for your image to include the number within a span tag:

<span class="teaser-image">1. 
    <img src="image-url" alt="Monetti">
</span>

Then a little more CSS to put some space between the number and the image:

.teaser-image img {
    margin-left: 0.5em;
}

[Patrik]

Perfect big thank you! 🙂 Is it possible to get the number to go to the top of the ceiling? Or in the middle like the text in the image. And is it possible to change size on the number? Look at my page thank you. 🙂 Have tried 2 hours soon but failed to accomplish it. 🙂

[David]

Try this:

.teaser-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 600;
    font-size: 1.2em;
}

[Author]

Posts