[Resolved] Social media buttons

[David]

I edited the code here to correct for margin and padding on mobile:

https://generatepress.com/forums/topic/social-media-buttons-2/page/2/#post-619566

[Guna]

Hello David,
I have come up with 2 small questions:
1. Where can I make the headings of my blogpost centered?
2.How can I link for example my article about myself on the page ABOUT also SEO available, cause now only my blogpost is available by Yoast SEO but nothing else?
Regards,
Guna

[Tom]

Hi there,

1. Try this:

.blog .entry-header,
.archive .entry-header {
    text-align: center;
}

2. I’m not too sure what you mean – can you explain a bit more?

[Guna]

1.Thanks a lot for your answer! Can you also give me a code for the subtitles of the blog article to be in the middle?
2. What I meant is the having Yoast SEO plugin when I go to Pages-About-Edit page, on the right side I can see a section with name:Publish. there are different things written, like the first one: status: published. The very last one is: SEO: not available. So my question is why it is not available if it shows available for my blogpost?

[Tom]

1. Which subtitles exactly? I’m having trouble spotting them.

2. I’m not too sure – you may need to ask Yoast support that one.

[Guna]

1. They must be H2, like the next heading in my blog article after Santiago de Chile – go creative, leave rich! which is: How I made enough money to spend my holidays in Buenos Aires?
2. OK, i will contact yoast.
3.I have checked how the subscription to the newsletter function works and can see that I dont receive an email to my sites official email, when somebody subscribes to my newsletter. Why is that? I use WPForms Lite?

[Tom]

1. Ah, you can try this:

.single .entry-content h2 {
    text-align: center;
}

3. Is there an option in WPForms that will do this for you? If there is and it isn’t working, it may be worth contacting them.

Let me know 🙂

[Guna]

Well, i tried to contact them WP forms, will see if they can help me.
As to the point 1. I copied the code, but it doesn’t work.
2.I talked to a friend who recommended me a better solution for my heading but I will need your help to do it, so instead of putting my logo in between the worldmap and split it in 2, it would go under it before the tagline and tagline would be devided into 3 lines and the arrow of my logo would point towards the center of the middle line. To understand it better, i will send a sketch to email.
3. I would like to add more margins on the both sides of my blog text on the mobile version, where do I do that?

[David]

Hi there,

1. I can see on your site that the H2’s within the content are centered?
If you want the H1 entry title also centered just update the code to:

.single .entry-content h2, .single .entry-header {
    text-align: center;
}

2. For the header changes, if you can set the header up like so:

1. Add your logo (without map) to the Site Identity, and set the header alignment to left.
2. Add the map image to the Header widget.

Once this is done, we can provide some CSS to arrange the layout.

3. You can set the Mobile content padding in the Customiser > Layout > Container

[Guna]

Hello David, thank you so much for your answer!!!!!
1. I copied the new code but still nothing, maybe something is wrong with my code plug in?
2.I have prepared header now for the code. However, i dont understand why the world map is so small eventhough, i chose large, under edit gallery.
3. with mobile padding it worked, thanks!

[David]

1. I’ll have a look.
2. Can you go into Customiser > Additional CSS and remove this code that is at the very end:

@media (min-width:769px) {
    .site-branding {
        display: inline-block;
    }

    .site-logo {
        float: left;
        margin-right: 20px;
    }
}

And then in your simple CSS find this code and remove it:

@media (max-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .site-branding {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

and this code and remove it:

@media (min-width:769px) {
    .inside-header {
        display: flex;
        flex-direction: column;
    }
    .site-branding {
        order: 2;
    }
}

Once done i can work on the new code to

3. 🙂

[Guna]

Yes, i have done it now, thanks a lot!

[David]

OK, just working on the code. I noticed that the header widget image (the map) is almost square in shape, which adds a lot of white space above and below it. Are you able to crop the image to remove this ‘dead’ space? or we will have a big gap around it in the header.

[Guna]

yes, i will do it right away!

[David]

OK, so now we just need to add this CSS:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.header-widget {
    float: none !important;
    max-width: 100% !important;
    text-align: center;
}

.site-branding {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    margin-right: auto;
    margin-left: 20px;
    text-align: center;
    margin-bottom: 0;
}

.site-logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: auto;
}

[Author]

Posts