The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Website errors
Jeckcoeler
post Jul 14 2019, 05:47 AM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 14 2019, 05:38 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Jul 15 2019, 11:49 AM
Post #3


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 15 2019, 12:19 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Don't use 'overflow: hidden'?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Jul 15 2019, 03:32 PM
Post #5


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
narjis infotech
post Jul 25 2019, 05:50 AM
Post #6





Group: Members
Posts: 2
Joined: 25-July 19
From: Ahmedabad
Member No.: 26,940



hi
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
narjis infotech
post Jul 25 2019, 05:52 AM
Post #7





Group: Members
Posts: 2
Joined: 25-July 19
From: Ahmedabad
Member No.: 26,940



Darrin has answered it perfectly..........
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 25 2019, 10:00 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Emaad Infotech
post Mar 12 2020, 02:52 AM
Post #9





Group: Members
Posts: 1
Joined: 12-March 20
From: Himmatnagar, India
Member No.: 27,228



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:47 AM