[Support request] My new landing page

[David]

Hi Chris,

the code looks good to me. As a note GP has three responsive CSS Classes for hiding elements on different devices which you can use:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Chris]

David, I did not know that!
So then I do not need your own css?
I only change the class in the table?
That would be great!

[David]

That’s correct, unless you need to change the breakpoints so for example you could try this:

<th class="verberg1"><span class="hide-on-mobile">Start </span>Portefeuille</th>

And that would remove the span on mobile 🙂 Should work in a table…..

[Chris]

David, I changed the table, see the html
Is this correct?

PS I do not know what the code span is …

<table class="chris1">
<thead>
<tr>
<th>Jaar</th>
<th class="hide-on-mobile hide-on-tablet">Start Portefeuille</th>
<th class="hide-on-mobile hide-on-tablet">Portefeuille Nu</th>
<th>Winst €</th>
<th class="hide-on-mobile hide-on-tablet">Winst %</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018</td>
<td class="hide-on-mobile hide-on-tablet">15.000,00</td>
<td class="hide-on-mobile hide-on-tablet">23.194,00</td>
<td>8.194,00</td>
<td class="hide-on-mobile hide-on-tablet">54,63%</td>
</tr>
<tr>
<td>2017</td>
<td class="hide-on-mobile hide-on-tablet">15.000,00</td>
<td class="hide-on-mobile hide-on-tablet">23.922,00</td>
<td>8.922,00</td>
<td class="hide-on-mobile hide-on-tablet">59,48%</td>
</tr>
<tr>
<td> </td>
<td class="hide-on-mobile hide-on-tablet"> </td>
<td class="hide-on-mobile hide-on-tablet">Totale Winst:</td>
<td>17.116,00</td>
<td class="hide-on-mobile hide-on-tablet">114,11%</td>
</tr>
</tbody>
</table>

[Chris]

David, I put everything back, I think my breakpoint is better … (hahaha!)
But do I have to add <span> everywhere now?

[David]

You need to switch some classes e.g this would mean that both title headings are hidden on mobile and tablet:

<th class="hide-on-mobile hide-on-tablet">Start Portefeuille</th>
<th class="hide-on-mobile hide-on-tablet">Portefeuille Nu</th>

I would assume the longer title you want for Desktop so it should be:

<th class="hide-on-mobile hide-on-tablet">Start Portefeuille</th>
<th class="hide-on-desktop">Portefeuille Nu</th>

This resource is great to learn from:

https://www.w3schools.com/TAGS/tag_span.asp

[Chris]

Okay, I’m going to study <span> carefully! 👍
Fortunately, w3c now no longer generates errors for the table.

Now only the Price table to HTML to get rid of all problems 😁

I have already seen something interesting: https://www.w3schools.com/howto/howto_css_pricing_table.asp

[David]

Thats great, its more rewarding to code it yourself 🙂 And a lot less errors

[Chris]

I really enjoy finding out everything about writing code myself, but I have to take small steps 😁

I love the price table that I have now! But too many w3c errors. See: https://www.beurstrading.nl/aanmelden/

I am going to try to make exactly the same in clean html 😱

[David]

Small steps. Always learning. Or just copy and paste 😉 Glad i could be of help.

[Chris]

Thanks David 👍👍👍

[Chris]

Hello David,
The price table and the results table are now completely in HTML, and now no more errors in W3C. Awesome! See: https://www.beurstrading.nl/test1/

But the CSS of the price table starts with *
Does that mean that it is for the entire website?
Is not that a problem?

See CSS:

* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 50%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 760px) {
    .columns {
        width: 100%;
    }
}

[David]

Hi there, yes the * is a wild car and will effect every element on the site.
I would advise against using that.

[Chris]

I thought so. How can I solve this? If I remove that code, the tables are no longer next to each other.

[David]

Add the box-sizing property to this rule:

.columns {
    float: left;
    width: 50%;
    padding: 8px;
}

[Author]

Posts