Search field size and Read more button

[Maged]

Hi, I am using the Marketer demo from the site library and I need to do couple of things please.

1- shrink the area of the search field to be displayed at the end of the navbar not the whole header to the logo.

2- How can I add a line break <br> before the Read more link, like in woorkup.com, or how can I add/delete/edit any html tag in general?

Thank you.

[Leo]

Hi there,

1. Try this CSS:

@media (min-width: 769px) {
    .navigation-search input {
        width: 50%;
    }
}

2. Try this CSS:

a.read-more {
    display: block;
    text-align: right;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Maged]

Thanks for your reply, regarding the search it works fine on desktop but on mobile phone the search input is very small, like it fits almost 3 or 4 characters only! It would be great if we can target the navbar area, so it expands to fit the whole navbar area using 100% width like in woorkup.com

Also the read more button, I succeeded in adding <br> in the php code in here https://docs.generatepress.com/article/activating-read-custom-excerpt/
but it works only for the Read more with custom excerpt not the regular one, so if there any way to inject the <br> tag before the read more button using code snippets or hooks, it would be appreciated. Thanks.

[Leo]

Adjusted the code above so it’s desktop only.

My CSS should work like adding a <br> tag no? We can tweak some more if you need to change the appearance more.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Maged]

Perfect, adding the media query fixed the search field problem on mobile devices.

Regarding the Read more I can add margin-top: 10px for example or any other css code, but I don’t know how to add/delete/edit an html tag like <br> for example before the Read more button, it would be appreciated if you let me know or give me a hint on how to achieve this. Thank you.

[Leo]

Try this filter:
https://docs.generatepress.com/article/generate_excerpt_more_output/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Maged]

Great, I think I’ll stick with the CSS solution for now.
I’m really happy I bought the premium version of GeneratePress.
Thank you for your help.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts