[Resolved] Author Box

[Paolo Fauci]

Hello

I’m trying to set the author’s box as on this Bimber theme that I will soon leave to switch to GeneratePress with the Liberte – Flint Skin theme

This is the Author Bimber Theme Box

Here is the picture: https://prnt.sc/osondn

https://www.paolofauci.it/ricette/gelato-ai-frutti-di-bosco-con-pochi-zuccheri/

I was able to modify the image, title size and description to enlarge.

Here is the temporary Author Box GeneratePress theme Box with the Liberte – Flint Skin theme

https://www.test.bigpaolo.it/make-liberte-your-own/

Thanks to the forum here

https://generatepress.com/forums/topic/author-box-3/

I managed to put the title and description to the side of the image.

Now I would like to enlarge the image but I didn’t understand what I have to do.

Can you help me?
Thank you
Paolo

[David]

Hi there,

in this piece of the CSS:

author-box .avatar {
    max-width: 100%;
    height: auto;
    border-radius: 100%;
    margin-right: 40px;
}

Remove the max-width: 100%; property and add a width: 75px; for example

[Paolo Fauci]

Hi, David,

I have edit in

width: 225px;

and it seems that it is close to that of a bimber theme.

However I noticed that Bimber Theme is displayed by mobile phone

with the image in the center

and the text and description in the center.

For the mobile phone this setting seems better

Can you help me?
Thank you
Paolo

[David]

I can’t access your site … but give this CSS a try:

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        align-items: center;
    }
}

[Paolo Fauci]

It is strange that you do not see it

here is the result through your CSS

https://prnt.sc/osxqy1

The image is a bit too big and the text is aligned on the left.

Let me know if you have problems with the site
Thank you
Paolo

[David]

I am getting the usual 403 forbidden error.
Try this CSS instead:

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-box .avatar {
        width: 150px;
    }
}

[Paolo Fauci]

Hi, David,

I can have your IP address I don’t want the WpSiteGuardian Plugin to have entered your address in the blacklist.
My sincerest apologies in advance if so.
If your address is not in the BlackList, I will have to open a ticket with siteground.
But on which site do you see error 403, on Test or on paolofauci?

Here is the avatar image after inserting your Ipad CSS: https://prnt.sc/ot0tsc

Here is the avatar image for Iphone:

https://prnt.sc/ot0wcl

There are two commands for

.author-box .avatar

I tried to do some tests by removing one but it breaks the image when setting the desktop view.

I send you the Css

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-box .avatar {
        width: 150px;
    }
}

.author-box {
    padding: 4%;
    margin-top: 60px;
    font-size: 0.9em;
    background-color:#f2f2f2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.author-box .avatar {
    width: 225px;;
    height: auto;
    border-radius: 100%;
    margin-right: 40px;
}

h5.author-title {
    margin-bottom: 0.5em;
	  font-weight: 600; 
}

I await your info

[Tom]

Hi there,

Sorry we didn’t get back to you sooner.

I’m able to see your site – what about it are you wanting to change now?

From what I can see, this should clean up the avatar on mobile a bit:

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
        margin-top: -20px;
    }

    .author-box .avatar img {
        max-width: 100px;
    }
}

Let me know 🙂

[Paolo Fauci]

Hi Tom

so I put your CSS but we didn’t solve what I asked for.

Given that on my site paolofauci from mobile you can see in another way:

here is the image: https://prnt.sc/otj4zo

I also wanted to set the theme GeneratePress with the Liberte – Flint Skin theme.

I had read the forum here
https://generatepress.com/forums/topic/author-box-3/
and I had made the appropriate modifications

Then I pointed out to David that despite the changes from mobile he could see badly and was not aligned with the center.

So he sent me his Css that you can see in this ticket but it didn’t work because the image becomes very big and goes off screen

Now with your CSS it is aligned to the left but the text remains outside

here is the picture: https://prnt.sc/otj9ec

I await your info
Thank you
Paolo

[David]

Its hard to tell what is interfering with the CSS without being able to see the site.
Could you resolve the 403 error ?

[Paolo Fauci]

Hi, David,

as I was telling you, the security plugin may have entered your IP address in the blacklist.

So if you can send me your IP address I can do a verification.

I worked all day on my hosting and apart from small moments (max 5 minutes) in which my internet lines had a whim I was always connected.

I’m waiting for your news
Thank you
Paolo

[Tom]

I just adjusted the CSS above: https://generatepress.com/forums/topic/author-box-5/#post-985410

This should be the result: http://prntscr.com/otphra

Make sure this mobile CSS is below the other CSS you’ve added, or else the desktop CSS will overwrite it.

[Paolo Fauci]

Thank you very much Tom is perfect now.

See you soon
Paolo

[Tom]

You’re very welcome 🙂

[Author]

Posts