Links and buttons work in desktop but not mobile view

[benediktbrenk]

Problem

Most of our Links and Buttons apart from our NavBar links work properly in desktop mode, but not on a mobile device. In general you have to touch the left or right rim or a special spot of the Link section whereas the Submit-Button on our EditPage does not react in any way (as said only on mobile device/in mobile view!).

An example: We have a transaction card component with a Link surrounding the whole card. If you click on any spot on the card in desktop view, it links to a details page. On mobile view you need to catch a certain spot on the right or left side of the component.

Code for transaction card

import React from "react";
import * as Styled from "./TransactionCard.styled";

function TransactionCard({ transaction }) {
return (
<Styled.CardContainer key={transaction._id}>
<Styled.CardLink href={/details/${transaction._id}}>
<Styled.ColorField category={transaction.category}></Styled.ColorField>
<Styled.ContentContainer>
<Styled.TransactionName>{transaction.name}</Styled.TransactionName>
<Styled.TransactionDate>{transaction.date}</Styled.TransactionDate>
</Styled.ContentContainer>

    <Styled.TransactionAmount direction={transaction.direction}>
      {transaction.direction === "Expense" ? "- " : "+ "}
      {transaction.amount}
      {transaction.currency}
    </Styled.TransactionAmount>
  </Styled.CardLink>
</Styled.CardContainer>

);
}

export default TransactionCard;

import styled from "styled-components";
import Link from "next/link";

export const CardLink = styled(Link)text-decoration: none; display: flex; flex-direction: row; gap: 1rem; padding: 1rem; border-radius: 8px; color: black;;

export const CardContainer = styled.lilist-style: none;;

export const ColorField = styled.divheight: 2rem; width: 0.5rem; border-radius: 3px; background-color: ${(props) => { switch (props.category) { case "Groceries": return "var(--groceries-color)"; case "Housing": return "var(--housing-color)"; case "Salary": return "var(--salary-color)"; case "Insurance": return "var(--insurance-color)"; case "Utilities": return "var(--utilities-color)"; default: return "#CCCCCC"; } }};;

export const ContentContainer = styled.divflex: 3; display: flex; flex-direction: column; gap: 0.2rem;;

export const TransactionName = styled.pfont: 700 14px/16px var(--font-family); margin: 0;;

export const TransactionDate = styled.pmargin: 0; font: 400 12px/14px var(--font-family);;

export const TransactionAmount = styled.pflex: 1; color: ${(props) => { return props.direction === "Income" ? "var(--amount-color-green)" : "var(--amount-color-red)"; }}; margin: 0; font: 600 14px/16px var(--font-family); text-align: right;;

Link to repo

For a better overview see our budget-app repo here: https://github.com/benediktbrenk/budget-app
Here you can also see the other Links/Buttons.

[benediktbrenk]

Due to a small bug we had the NavBar container overlaying most of the pages' content thus deactivating the Links/Buttons. The actual NavBar which is seen on the page was a div inside the nav so that the whole NavBar container could not be seen.

[JessicaLoers]

Hi @benediktbrenk ✨

As we discussed and demonstrated live, it appears that your NavBar is covering certain areas. This issue likely stems from the min-height of 700px set on the div within the nav. You might want to consider adjusting this value to ensure all interactive elements are accessible on the page. If you need any help with this adjustment or have more questions, feel free to ask!