CODEWITHSUNDEEP
jqueryhtmlcss
Gabi Rodríguez
Gabi Rodríguez

Reputation: 59

Resize Logo Image - Mobile Version

I am a beginner working for a class assignment, I have successfully created the logo and placed it on the top left corner (with your help!) but I noticed that on the mobile version, the logo gets bigger and blurry (see picture please!). I would like to keep it very small at the top of the homepage but I don't really know how to!

This is the link for my website: http://gabrielr.sgedu.site/final-project/

Any help please![enter image description here]1

Upvotes: 2

Views: 66

Answers (2)

Juan Ferreras
Juan Ferreras

Reputation: 2861

Your element h1.site-header__title is on display: inline-block if the width is 55em or bigger. When is less than that, it defaults back to display: block which makes it take the full width. Then you have all img tags with a width: 100% which means that even if the image is smaller than the full width of the parent element, it's going to still expand it, which causes your pixelation.

In general it's good to just keep the max-width: 100% for images, to prevent unintended pixelation.

Another solution for your issue in particular, if you don't want to change that rule, would be to limit the max width of either the img or the h1.site-header__title, with either a width or a max-width rule.

Upvotes: 2

Ivan Karaman
Ivan Karaman

Reputation: 1234

write size for image... 

   h1.site-header__title img {
        width: 92px;
    }

Upvotes: 0

Related Questions