[Vuejs]-How to stop overflow on Vuetify app-bar content

3👍

  • Replace cols="6" with cols="auto" on Get in touch button. If it’s set to a numeric value, the width will be fixed. If it’s not included, the col will expand to fill the row.
  • Remove v-spacer before LinkedIn (sibling inside v-row), add justify="end" to its parent v-row to align the content to the right.
  • Three nav buttons in the middle need to be wrapped in v-col (each). Move the v-for to a v-col (preferably a cols="4" so they don’t shift rows as the page narrows). v-row always needs v-col as immediate child.
  • Also you have v-col and v-row as siblings, and the first v-col is not wrapped in the v-row.

Honestly you don’t need ANY of those v-spacers. Just remove all of them and look into v-row justify properties. (space around, space between, etc.)

A trick to visualise content boxes is to add a style on all elements:

* {
  outline: 1px solid lime;
}
👤Muge

Leave a comment