CODEWITHSUNDEEP
htmlcssreactjs
tobeydw
tobeydw

Reputation: 107

How to change placement of element for mobile version of React App?

currently I have this desktop application. This is basically what the header looks like, a logo on the left and then the calendar box in the middle.

Desktop App

I want to make this mobile friendly, and have it look more like this, ONCE the screen resolution is detected to be a mobile device:

enter image description here

Here's what my code looks like currently (I only have the desktop version of it working):

import React from 'react';
import { HeaderWrap } from './headerStyles';
import calendar from "../images/calendar.png";
import btc from "../images/btc.png";
function Header() {
  return (
    <HeaderWrap>
      <img style={{marginLeft:'1%', width:'140px', height:'140px', float:'left'}} src={btc} alt="logo"/>

      <div className="boxWrap">
        <img style={{marginLeft:'15px', marginTop:"4%", width:'35px', height:'35px', float:'left'}} src={calendar} alt="calendar"/>
        <h1   style={{
          marginLeft: "50px",
          marginBottom: "10px",
        color:"black",
      fontSize:"12px",}}> Tuesday 27, March, 2021 </h1>
      </div>
    </HeaderWrap>

  );
}

export default Header;

Here's what's inside headerStyles.js:

import styled from 'styled-components';

const media = {
  desktop: `@media(min-width: 1000px)`
}

export const HeaderWrap = styled.div`
  width: 100%;
  border: 1px solid blue;
  padding: 14px 0;


  .boxWrap{
    width: 30%;
    margin: auto;
    margin-top: 40px;
    height: 60px;
    border: 1px solid blue;

    ${media.desktop}{
      align-items: center;

    }
    .calendar{
      box-shadow: 0 0 5px 1px lightgrey;
      width: 100%;
      height: 100px;
      ${media.desktop}{
        width: 48%;
      }
    }

  }

  h1{
    margin-left: 10px;
    color: #fff;
  }

`

Any help would be absolutely appreciated, thank you!

Upvotes: 0

Views: 1436

Answers (1)

nmxmxh
nmxmxh

Reputation: 36

Using flex instead of float to arrange the elements will be easier for you. You're also using styled-components so you can remove the inline styling to properly separate your concerns.

import React from 'react';
import { HeaderWrap } from './headerStyles';
import calendar from "../images/calendar.png";
import btc from "../images/btc.png";
function Header() {
  return (
    <HeaderWrap>
      <img className="btc" src={btc} alt="logo"/>

      <div className="boxWrap">
        <img src={calendar} alt="calendar"/>
        <h1> Tuesday 27, March, 2021 </h1>
      </div>
    </HeaderWrap>

  );
}

export default Header;

and

const media = {
  desktop: `@media(min-width: 1000px)`
}

export const HeaderWrap = styled.div`
  width: 100%;
  border: 1px solid blue;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-items: space-between;

  .btc {
    width: 140px;
    height: 140px;
   } 


  .boxWrap {
    width: 30%;
    height: 60px;
    border: 1px solid blue;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-items: space-around;

  img {
    height: 35px;
    width: 35px;
  }


  .calendar{
    box-shadow: 0 0 5px 1px lightgrey;
    width: 100%;
    height: 100px;

    ${media.desktop}{
      width: 48%;
    }
  }

}

h1{
  color: #fff;
}

${media.desktop}{
  flex-direction: column;
  align-items: flex-start;
}

`

This is the closest I can get at the moment without running it locally, if you have problems with the implementation just add a comment.

Upvotes: 1

Related Questions