Misaligned widgets in mobile view

[auanasgheps]

Description

Hi,
I have configured some widgets and they look great on Desktop, but looks like are misaligned when using a mobile portrait view.

Am I doing anything wrong?

Mobile portrait

Desktop

homepage version

v0.8.11

Installation method

Docker

Configuration

# widgets.yaml 
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/service-widgets

- resources:
    label: System
    cpu: true
    memory: true
- resources:
    label: NVMe
    expanded: true
    disk: /
- resources:
    label: HDD
    expanded: true
    disk: /mnt/hdd

- search:
    provider: duckduckgo
    target: _blank

# settings.yaml
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: lolnas homepage

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey
  
quicklaunch:
  searchDescriptions: true
  hideInternetSearch: true
  showSearchSuggestions: true
  hideVisitURL: true
  
 
layout:
  - Multimedia:
  - Download:
  - Storage:
  - Monitoring:
  - System:
        style: row
        columns: 4

Container Logs

I don't think are relevant.

Browser Logs

I don't think are relevant.

Troubleshooting

I don't think are relevant.

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

Based on the information provided, it seems like you are experiencing a responsive design issue where the widgets are not aligning correctly on mobile devices in portrait mode. This could be due to a variety of reasons, such as CSS media queries not being set up correctly to handle different screen sizes, or specific styles that are applied to the widgets that do not adapt well to smaller screens.

To address this issue, you should:

1. Check if there are any responsive design settings or options within the Homepage documentation that you might have missed. Look for any configuration related to mobile views or media queries.
2. Review the CSS for the widgets and ensure that they are designed to be responsive. This might involve using flexible units like percentages or viewport units, and media queries to adjust the layout for different screen sizes.
3. If the issue persists and you cannot find a solution in the documentation, consider reaching out for support. You can use the 'Ask AI' button in the Homepage documentation, open a GitHub discussion, or check out the #ai-support channel on Discord for assistance.

Since you are using Docker for installation, make sure that the container is running the latest version of Homepage, as updates may contain fixes for responsive design issues.

If you have already tried looking through the documentation and troubleshooting guides without success, it may be helpful to file a bug report or ask for help in the Homepage community forums or Discord channel.

Remember to provide as much detail as possible when seeking help, including the version of Homepage you are using, your configuration files, and screenshots of the issue.

This comment was generated by Glime.

[auanasgheps]

Hello, anyone please?

[github-actions[bot]]

This discussion has been automatically closed due to inactivity. See our contributing guidelines for more details.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.