Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Website errors

Posted by: Jeckcoeler Jul 14 2019, 05:47 AM

Dear,
I am working to build up a website with Blogger and I’m a beginner in HTML. This is my current website that I am still working at: https://howtoplaystation.blogspot.com/
Can you please help me with these problems?
1) Why is my logo at top-left blurred? How can I fix it?
2) Why are the pictures on the right side( popular tab) cropped? How can I fix it? They are also cropped here: https://howtoplaystation.blogspot.com/2019/07/blog-post.html at the bottom( in the “YOU MIGHT ALSO LIKE” tab)

Thank you very much in advance!

Posted by: Darin McGrew Jul 14 2019, 05:38 PM

QUOTE
1) Why is my logo at top-left blurred? How can I fix it?
The HTV logo in the top left is resized by the browser. On top of that, you've specified one size in the height and width properties, and a different (smaller) size in the max-height and max-width properties. My guess is that different browsers will handle the resizing differently, although the logo doesn't look particularly blurred to me when I view the page.

QUOTE
2) Why are the pictures on the right side( popular tab) cropped? How can I fix it?
That's caused by the "overflow: hidden" property.

But you're also resizing these large images to thumbnail sizes as well. Don't do that. Create images of the size you want and use them. Don't have the browser resize images.

Posted by: Jeckcoeler Jul 15 2019, 11:49 AM

QUOTE(Darin McGrew @ Jul 14 2019, 05:38 PM) *

QUOTE
1) Why is my logo at top-left blurred? How can I fix it?
The HTV logo in the top left is resized by the browser. On top of that, you've specified one size in the height and width properties, and a different (smaller) size in the max-height and max-width properties. My guess is that different browsers will handle the resizing differently, although the logo doesn't look particularly blurred to me when I view the page.

QUOTE
2) Why are the pictures on the right side( popular tab) cropped? How can I fix it?
That's caused by the "overflow: hidden" property.

But you're also resizing these large images to thumbnail sizes as well. Don't do that. Create images of the size you want and use them. Don't have the browser resize images.

Thank you very much. I fixed the logo issue, that is why it isn't blurred anymore. But the images are still cropped and I am really a total beginner so can I change something in the HTML of the website to fix the cropped images? Thank you again!

Posted by: pandy Jul 15 2019, 12:19 PM

Don't use 'overflow: hidden'?

Posted by: Jeckcoeler Jul 15 2019, 03:32 PM

QUOTE(pandy @ Jul 15 2019, 12:19 PM) *

Don't use 'overflow: hidden'?

So I should delete 'overflow:hidden' from the HTML of the website? But there a lot of them. Sorry if this was a stupid question.

Posted by: narjis infotech Jul 25 2019, 05:50 AM

hi

Posted by: narjis infotech Jul 25 2019, 05:52 AM

Darrin has answered it perfectly.........https://www.narjisinfotech.com/ultimate-matrimonial-script

Posted by: pandy Jul 25 2019, 10:00 AM

QUOTE(Jeckcoeler @ Jul 15 2019, 10:32 PM) *

QUOTE(pandy @ Jul 15 2019, 12:19 PM) *

Don't use 'overflow: hidden'?

So I should delete 'overflow:hidden' from the HTML of the website? But there a lot of them. Sorry if this was a stupid question.


Just don't use it for the logo.

Posted by: Emaad Infotech Mar 12 2020, 02:52 AM

use SVG image for best quality resolution, instead of a jpg or png file. It can improve webpage performance and does not create a request to the server.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)