0

How do make my home page responsive? i tried using meta but not working, this is my home.js page which contains what i want to make responsive, needs to add or remove anything?

import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return( 
    <div className="background">
        <div className="navbar">
            <div className="header"><br />
                <img src={logo}  alt="logo"/>
                <h3>MyChat</h3>
            </div>
            <nav>
                <ul>
                    <li><input type="text" placeholder="Search News" /></li>
                    <li><Link to = '/'>HOME</Link></li>
                    <li><Link to = ''>NEWS</Link></li>
                    <li><Link to = ''>TIMELINE</Link></li>
                    <li><Link to = ''>CONTACT</Link></li>
                </ul>
            </nav>
        </div>
        <div className = "backform">
            <div className="info">
                <h2>Make Cool Friends !!!</h2>
                <p>Friend Finder is a social network template that can be used to  <br />
                    connect people. The template offers Landing pages, <br />
                    News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
                    What are you waiting for? Join Now.
                </p> 
            </div>   
           
            <div className="holdback">
                <form>
                    <Link to =''>Login</Link>
                    <Link to = ''>Register</Link>
                </form>
            </div>
        </div>
    </div>
);
  }

  export default HomePage;

This is my css file for home.js design that contains background, image, navbar, header, text styling and fonts, i tried using meta device display for my css as well but not working.

@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico.ttf');
  }

  @font-face {
    font-family: 'Lobster';
    src: url('../fonts/Aladin-Regular.ttf');
  }

  @font-face {
    font-family: 'Neo';
    src: url('../fonts/Nunito-SemiBoldItalic.ttf');
  }

.background{
    background-image: url("../images/home-background1.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 680px;
}
.header{
    display: inline-block;
    margin: 0 2rem 0 20px;
    padding: 0 5rem 10px ;
}

.header h3{
    font-size: larger;
    font-family: 'Pacifico';
    font-stretch: expanded;
    color: #764CDF;
    margin: 5px 5rem 10px;
    padding: 0 5rem;
    position: static;
}

.header img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 7rem;
    position: absolute;
}

.navbar{
    background-color: #5EECFF;
    width: 100%;
    height: 5rem;
}

.navbar ul{
    list-style: none;
    float: right;
    padding: 0 3rem;
    margin: 0;
    text-decoration: none;
}

.navbar ul li{
    display: inline;
    padding: 1rem;
    font-size: larger;
    font-family: 'Lobster';
}

.navbar ul li input{
    border-radius: 10px;
    background-color: #F0F0F0;
    width: 200px;
    height: 20px;
    text-indent: 1rem;
    transition: width 0.4s ease-in-out;
    opacity: 0.5;
    font-family: 'Times New Roman', Times, serif;
    font-size: small;
}

a:link,
a:hover{
    text-decoration: none;
    color: white;
}

a:active{
    color: #764CDF;
}

a:focus{
    color: white;
    background-color: #764CDF;
}

.info{
    color: white;
    padding-left: 15rem;
    padding-top: 8rem;
    font-family: 'Neo';
    
}

.backform{
    display: inline-flex;
}

.holdback{
    margin: 0;
    padding-left: 2rem;
    margin-left: 5rem;
    margin-top: 5rem;
    border-radius: 5px;
    background-color: #F0F0F0;
    width: 500px;
    height: 300px;
    text-align: left;
    display: inline-block;
}
K'man Amuda Jr.
  • 191
  • 1
  • 1
  • 6
  • You can use [Media Query](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) and add breakpoint for tablets, mobile phones and Desktop – monim Jul 07 '22 at 21:48
  • 1
    `How do make my home page responsive..` is a very broad question. You should read blogs, guides, watch tutorials how to make things responsive. – bill.gates Jul 07 '22 at 21:54
  • you can `google` instead of stackoverflow for this kind of question. and it's very basic thing for `Front end developer` who deals with react. You should have knowledge of Responsive if you're dealing with front end technology. – Shurvir Mori Jul 08 '22 at 04:03

1 Answers1

1

Your CSS must have different styles for each breakpoint you want to make it responsive.

There are two ways to achieve that:

  1. You write it by yourself. As in the comments, there are already several guides for you to learn how to do it. Example

  2. There are some frameworks/libraries out there that people are using it to achieve such thing. It makes our lives easier. You can search and study them and then choose by yourself which one you want to use. To name a few (popular ones), Bootstrap and Tailwind.

holydragon
  • 6,158
  • 6
  • 39
  • 62