[Resolved] Author Box

Home Forums Support Author Box

This topic contains 13 replies, has 3 voices, and was last updated by  Tom 3 months, 3 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #984224

    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

    #984284

    David Customer Support

    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

    #984300

    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

    #984447

    David Customer Support

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

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

    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

    #984669

    David Customer Support

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

    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

    #985410

    Tom Lead Developer

    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 🙂

    #985689

    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

    #986023

    David Customer Support

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

    #986115

    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

    #986153

    Tom Lead Developer

    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.

    #986411

    Paolo Fauci

    Thank you very much Tom is perfect now.

    See you soon
    Paolo

    #986667

    Tom Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.