[Support request] Line in menu mobile + Change post date position

[Roger]

Hello,

I would like to know how to make both modifications:

1. How to add a line below the header on the mobile site like the one on the desktop site?

2. How to put the date below the name of the author of the post?

view the changes here
https://violao.art/menu-mobile/

[Leo]

Hi there,

1. Try this:

#mobile-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

2. Try this:

@media (max-width: 768px) {
    .single .entry-meta {
        display: flex;
        flex-direction: column-reverse;
    }
}

[Roger]

Great!
Both work.

Just more questions:

1. Is it possible for the post date to be below the author’s name?

2. How to increase the distance between the content and the header?

Thank you!

[David]

Hi there,

1. I updated Leos second CSS code here

2. Is this space between the Site Header ( Logo + Navigation ) and the page ?

[Roger]

Yes David!

See how the category name (in this example “entrevista”) is very close to the header.

https://violao.art/menu-mobile/

[David]

You can change that space for mobile with this CSS:

@media (max-width: 768px) {
    .custom-post-header {
        padding-top: 40px;
    }
}

[Roger]

Hi David

The code did not work.

@media (max-width: 768px) {
.custom-post-header {
padding-top: 40px;
}
}

[David]

Move the CSS to the bottom of the Additional CSS.

[Roger]

Now it worked perfectly!

Can I use the same code to increase space globally? (Pages and products have not been modified).

Thank you!

[Leo]

Can you link/guide me to a page you are referring to?

[Author]

Posts