Can't expand div horizontally with Native Base on React Native Web

Viewed 15

I am trying to expand a div when I am testing for mobile sizes:

Mobile image

However, as you can see, it is completely in one tiny part of the screen. This isn't happening on larger, desktop sizes, just mobile sizes.

My layout looks like this:

import React from 'react'
import { Box, Row, Column, Container } from 'native-base'
import Header from 'app/components/header/Header'
import Footer from 'app/components/footer/Footer'
const Layout = (props: { children: any }) => {
  return (
    <Container w="100%" flexGrow={1}>
      {props.children}
      <Footer />
    </Container>
  )
}

I've tried using all sorts of elements, as seen above, currently I am using a <Container />

My <Footer /> looks like this:

const MainFooter = () => {
  return (
    <Column bg="#171717" py={50} px={[108, 90]} flexGrow={1} w="100%">
       ...
    </Column>
  )
}

The only way that I can get the full width is if I set it explicitly, but that isn't a great solution, because I want the width to be able to resize when a user expands or contracts the window.

What exactly needs to be done to expand the width more? I've been trying to find any potential solution and I can't find anything that ends up working.

This is on a NextJS site if that helps at all.

1 Answers

Probably was with my viewport. Adding this to the page header fixed the problem:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related