Hi Simo,

I'm doing well, hope you too!

For point 1 and 2 you can add the following CSS to Appearance -> Customize -> Additional CSS:

.jumbotron .jumbotron-caption.center,
body.blog .sidebar .widget.sfsi .widget-title {
    text-align: center;
}

For point 3 you can add the following as well:

@media (min-width: 992px) {
    body.page-id-10516 .asl_w_container {
        max-width: 90%;
        margin: 0 auto;
    }
}

The 90% value can be decreased to your own needs to reduce the width of the search field.

1. This is not really as easy as it seems and you need a bit of HTML/CSS knowledge to understand this concept. Not every element has a specific name so if you would target for example "widget-title" and apply CSS to that all elements with that name on your site would be changed.

Here is a video that demonstrate how to use the browser console to do this:

https://www.youtube.com/watch?v=rjWUzxMjCAU

Unfortunately the newsletter elements don't have a unique name. So you can target the element with CSS but it will also target all other widget titles in that sidebar that are placed within the SiteOrigin Editor widget. You can see this yourself by adding the following line to the Additional CSS panel of the theme customizer:

body.blog .sidebar .widget_sow-editor .widget-title {
    text-align: center;
}

This is something I can't change unfortunately.

In this case you might want to remove the title from the widget title input field from the SiteOrigin Editor and add a plain text heading within the textarea instead so you can center it with the toolbar settings.

2. I would not recommend changing the 992px to 200px because that will target mobile screens as well. Setting a search field to 50% width on mobile screens will be a pretty narrow search field. If that is what you try to do then ignore my message.

The CSS should work but the CSS above this one within your Additional CSS panel is not closed. Search for this specific CSS:

/* Centrer Titres page d'accueil et titre 'Partager le Blog' */
.jumbotron .jumbotron-caption.center,
body.blog .sidebar .widget.sfsi .widget-title {
    text-align: center;
/* Point 3 */

And replace that with this:

/* Centrer Titres page d'accueil et titre 'Partager le Blog' */
.jumbotron .jumbotron-caption.center,
body.blog .sidebar .widget.sfsi .widget-title {
    text-align: center;
}
/* Point 3 */

1. If you simply want to center all widget tiles in the sidebar you can add the following line instead:

body.blog .sidebar .widget-title {
    text-align: center;
}

2. You've changed 2 things from the initial custom CSS code I provided for your question. The 992px screen size to 200px and the 90% width to 50%.

That means that from screen sizes of 200 pixels wide and all above the search field will be 50% width. On desktop screens this will be fine but on mobile screens this will be very narrow.

In the CSS I provided only screen sizes from 992 pixels wide and above will be changed.

2. No mobile screen will be targeted, only on desktop screen sizes. That is what the initial question was, to change the width of the search bar on desktop screen and not on mobile screens, right?

I'm sorry but on this point I don't fully understand anymore what's the uncertainty is. Does the CSS not work at all or do you also want to change the search bar width on mobile screens as well?

No worries Simo, I'm happy to hear everything is working as you like

Ticket is closed as per your request.