Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Post History

60%
+1 −0
Q&A Logo becomes tiny in mobile landscape mode and narrow desktop windows

Related bug (not sure if the solution will be related): Logo shrinks from blue notification circle The size of the community logo at the top left of the page changes based on the width of t...

0 answers  ·  posted 2y ago by trichoplax‭  ·  edited 2y ago by trichoplax‭

Question bug responsive logo
#5: Post edited by user avatar trichoplax‭ · 2023-01-19T06:39:30Z (almost 2 years ago)
Make link to related bug human readable
  • Related bug (not sure if the solution will be related):
  • - https://meta.codidact.com/posts/287740
  • ---
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
  • Related bug (not sure if the solution will be related):
  • - [Logo shrinks from blue notification circle](https://meta.codidact.com/posts/287740)
  • ---
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
#4: Post edited by user avatar trichoplax‭ · 2023-01-18T19:19:20Z (almost 2 years ago)
Mention related bug
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
  • Related bug (not sure if the solution will be related):
  • - https://meta.codidact.com/posts/287740
  • ---
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
#3: Post edited by user avatar trichoplax‭ · 2022-12-17T19:58:29Z (about 2 years ago)
Reverse decision to use "phone" instead of "mobile"
  • Logo becomes tiny in phone landscape mode and narrow desktop windows
  • Logo becomes tiny in mobile landscape mode and narrow desktop windows
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On phone, with a narrow screen, this gives a large logo that is easily visible on the small phone screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large phone version of the logo. On phone, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape phone screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the phone size logo? Also, would it be better to have the transition to the phone size logo at a larger width, so that landscape phone devices also use it? Or should landscape phone devices use the desktop size logo? If the phone size logo is intended to be used in both portrait and landscape phone modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (phone size logo)
  • ![Phone size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
#2: Post edited by user avatar trichoplax‭ · 2022-12-17T15:23:37Z (about 2 years ago)
Use internationally recognisable "phone" instead of "mobile"
  • Logo becomes tiny in mobile landscape mode and narrow desktop windows
  • Logo becomes tiny in phone landscape mode and narrow desktop windows
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (mobile size logo)
  • ![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
  • The size of the community logo at the top left of the page changes based on the width of the window.
  • On phone, with a narrow screen, this gives a large logo that is easily visible on the small phone screen.
  • On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.
  • However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large phone version of the logo. On phone, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape phone screen.
  • Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the phone size logo? Also, would it be better to have the transition to the phone size logo at a larger width, so that landscape phone devices also use it? Or should landscape phone devices use the desktop size logo? If the phone size logo is intended to be used in both portrait and landscape phone modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?
  • Here are the current transition points:
  • ## Width 511 pixels (phone size logo)
  • ![Phone size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)
  • ## Width 512 pixels (tiny logo)
  • ![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)
  • ## Width 780 pixels (tiny logo)
  • ![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)
  • ## Width 781 pixels (desktop size logo)
  • ![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)
#1: Initial revision by user avatar trichoplax‭ · 2022-12-13T08:51:05Z (about 2 years ago)
Logo becomes tiny in mobile landscape mode and narrow desktop windows
The size of the community logo at the top left of the page changes based on the width of the window.

On mobile, with a narrow screen, this gives a large logo that is easily visible on the small mobile screen.

On desktop with a full screen browser, this gives a smaller logo that works better on the generally larger screen.

However, between these two widths, there is a range of values for which the logo becomes very small. On desktop, this can be seen by making the browser window narrower, but not sufficiently narrow to trigger the large mobile version of the logo. On mobile, this can be seen by rotating the screen to landscape instead of portrait. This tiny logo seems unsuitable either for a small window taking up part of the screen on a desktop, or for a landscape mobile screen.

Would it work better to keep the desktop size logo for all widths down to the point at which it switches to the mobile size logo? Also, would it be better to have the transition to the mobile size logo at a larger width, so that landscape mobile devices also use it? Or should landscape mobile devices use the desktop size logo? If the mobile size logo is intended to be used in both portrait and landscape mobile modes, would it be worth detecting whether the device is in portrait or landscape mode using `orientation` in CSS, then having a different width threshold for portrait than for landscape?

Here are the current transition points:

## Width 511 pixels (mobile size logo)
![Mobile size logo when width is 511 pixels](https://meta.codidact.com/uploads/q43w85mqhkc1gkocp0z17qt8kqz7)

## Width 512 pixels (tiny logo)
![Tiny logo when width is 512 pixels](https://meta.codidact.com/uploads/67qggzroiyrp6cww9ifu6m0gd8w3)

## Width 780 pixels (tiny logo)
![Tiny logo when width is 780 pixels](https://meta.codidact.com/uploads/xnyccaoibyuaoytepg6wtu5lq2py)

## Width 781 pixels (desktop size logo)
![Desktop size logo when width is 781 pixels](https://meta.codidact.com/uploads/9nzphvk23ps2m2wykwxlb6u6etll)