Author Box

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

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

I can't access your site ... but give this CSS a try:

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

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

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;
    }
}

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

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 :)

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

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

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

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.

Thank you very much Tom is perfect now.

See you soon
Paolo

You're very welcome :)