Support » Theme: Olsen Light » about me image blurred

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi there,
    the about image you are using is 2600x2900px! This is huge, try reducing it to 285x322px and reupload it.

    I actually have a different image I want to use. I will put it in so you can see what it does. Can I just edit it in the edit image section to change the dimensions? I am not sure how to change the image size.

    This image is a slightly different, but comes out blurred. I played around with the “scale image” size. Is that what I should do? I haven’t been able to get it to be clear however.

    Also, can you tell me how to make sure my feature images aren’t blurred?

    Hi there,
    Well, the image in your about widget looks fine. I couldnt notice anything blurry on it. For you featured images check this thread and let me know if it helps.

    It’s blurred, it’s not clear. It’s crisp when I look at it, then once in About Me…it’s blurred.

    Can you add this

    .widget_about_avatar img{

    and let me know if this helps?

    It didn’t work.

    Also, why is the second post on my website small?



    Hi there,
    you will need to change your layout options from Appearance->Customize->Layout Options to the plain layout

    Now, for the about box. I suggest removing my previous suggestion completely since you have changed the image size of your images and use images like 280x280px anything smaller that the one you have now.

    You will notice that if you add this

    .widget_about_avatar img {
        max-width: 291px;
        width: 291px;

    replacing my previous suggestion the image will look better, but its larger that the recommended (200x200px)



    How can I add a search bar to top of mobile website page?



    Hi there,
    add this

    <form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="searchform" method="get" role="search">
    		<label class="screen-reader-text"><?php esc_html_e( 'Search for:', 'olsen-light' ); ?></label>
    		<input type="text" placeholder="<?php echo esc_attr_x( 'Search', 'search box placeholder', 'olsen-light' ); ?>" name="s" value="<?php echo get_search_query(); ?>">
    		<button class="searchsubmit" type="submit"><i class="fa fa-search"></i><span class="screen-reader-text"><?php echo esc_html_x( 'Search', 'submit button', 'olsen-light' ); ?></span></button>

    after this
    </div><!-- /site-logo -->
    then add this

    header .searchform{display:none;}
    header .searchform{display:block;}

    to make it appear only in mobile.
    If you decide to proceed with this modification I would suggest you create a child theme, copy over the files you are editing and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update.

    Have a look at this guide to learn more about child themes and how to create one

    • This reply was modified 2 months ago by  Fotis.
    • This reply was modified 2 months ago by  Fotis.
Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.