chatcody[bot]
commented
1 year ago Thank you for bringing up this issue. It seems like there is a problem with the responsiveness of the webpage when viewed on an iPhone XR. To address this, we can modify the CSS of the webpage to ensure that the breadcrumbs, topic card, and relation card are displayed properly on smaller screens.
One possible solution is to use media queries to adjust the layout of the webpage based on the screen size. For example, we can set a breakpoint at 414 pixels (the width of an iPhone XR) and apply different styles to the elements that are causing issues. Here's an example of how we can modify the CSS:
@media only screen and (max-width: 414px) { / adjust the layout of the breadcrumbs, topic card, and relation card / .breadcrumbs { / add styles here / } .topic-card { / add styles here / } .relation-card { / add styles here / } }
We can also consider using a responsive framework like Bootstrap or Foundation to make the webpage more mobile-friendly. These frameworks provide pre-built components and styles that can be easily customized to fit our design.
If there are any other details or information that could help us better understand the issue, please let us know.
Ive noticed when the viewport is set at 414 x 896 (iPhone XR), the webpage is inconsistent with the design. The header is responsive by showing the drop down however, the breadcrumbs, topic card and relation card are not in the design layout of a phone.