Okay
  Public Ticket #3122625
Items to center
Closed

Comments

  •  46
    Tuina_Simo started the conversation

    Hi Barry,

    Hope you're doing well?

    I would like to center these elements please, I think some CSS code is needed!

    1. The 'Découvrir' button on the homepage (for smartphone, it is already centered on laptop). Also is it possible to center each of the titles as well ('MASSAGE CHINOIS TUINA à COURBEVOIE, LA DEFENSE, PARIS' and 'Le massage chinois de la Médecine Traditionnelle Chinoise')?

    8909932067.png 

    2. The 'Partager le Blog' title I would like to be in the center of the column, it's part of the Widgets of the Blog page https://tuinasimo.com/blog/

    1633783924.png

    3. On the https://tuinasimo.com/meridiens-points-acupuncture/ page, I would like to make the Search bar shorter and then center it as well

    3767298202.png

    Thanks a lot for your help,
    Kindly
  •  1,284
    Barry replied

    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.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  46
    Tuina_Simo replied

    Hi Barry,

    - Thanks Barry, points 1 and 2 are working well.
    Could you please let me know how to proceed to find the code/name of the item I want to center? For example, if I want to center the title 'Inscription à la Newsletter' in the blog page like you did with 'Partager le le Blog'.
    If I know how to do that, I won't have to ask you each time I want to center an item🙏🏻

    - For point 3, I tried the CSS you gave and even changed the min-width but the length of the search bar didn't change much. Could you please check it out? I put this:

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

    Kindly, Simo

  •  1,284
    Barry replied

    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 */
    

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  46
    Tuina_Simo replied

    Thanks Barry,

    1. I see, it's not that easy to do. Thanks for the video.

    I did as you advised: '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.' and it worked for 'S'inscrire à la Newsletter':
    8157002347.png

    I have a limitation though when I try to do this for the 'Category' widget because the title 'Categories' is part of the widget as you can see in the screenshot below. I'm not able to erase it. Is there a workaround here?

    5377598741.png

    Same issue for 'Articles récents' and 'Archives' widgets, so I can't center the titles!

    6263990554.png

    2. My mistake, I forgot to close the CSS. I left the 992px as you advised.

    For the max-width, I put it to 50% and that has no incidence on how it looks on my mobile screen. Could you please explain why you said 'Setting a search field to 50% width on mobile screens will be a pretty narrow search field'? Have you meant on laptop screens?

    Regards, Simo

  •  1,284
    Barry replied

    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.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  46
    Tuina_Simo replied

    Thanks Barry,

    1. It's good now, all titles are centered.

    2. I'm still not sure to understand your point. Here is the current CSS I put:

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

    I guess this way, even with the 50%, there is no incidence on how the search bar will look on mobile screens right?

    If there is no incidence, please close this ticket.

    Best regards, Simo

  •  1,284
    Barry replied

    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?

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  46
    Tuina_Simo replied

    My bad Barry for the confusion,

    It works perfectly well, I only needed to change the size on laptop screen.

    Please close the ticket, Simo

  •  1,284
    Barry replied

    No worries Simo, I'm happy to hear everything is working as you likesmile.png

    Ticket is closed as per your request.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes