Tips for optimizing the responsiveness of your React component

I am facing an issue with making our website responsive and applying CSS to it. I have shared the UI code below for reference. Please review it and provide a solution as soon as possible. I need to ensure that this cat girl picture and text are responsive and look perfect on big screens.

https://i.sstatic.net/oOqZ5.png

PostPage.js

import React from "react";

const PostPage = () => {
  return (
    <div>
      <div
        className="container"
        style={{ backgroundColor: "white", borderRadius: 10, padding: 5 }}
      >
        <div
          className="header"
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginRight: 10,
          }}
        >
          <i
            class="fa fa-home"
            style={{ fontSize: 25, marginTop: 5, marginLeft: 35 }}
          >
            {" "}
            GiveIndia
          </i>
          <h3 style={{ marginBottom: 5, marginLeft: 35 }}>...</h3>
        </div>
        <p style={{ marginRight: 35, marginLeft: 35 }}>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged.
        </p>
        <img
          src="https://live.staticflickr.com/1616/26009626105_26cec46544_b.jpg"
          style={{ width: 700 }}
        />
        <div
          className="message-part"
        >
          <div className="row">
            <div className="col-sm-6">
              <img
                src="http://i.imgur.com/lGq1IXo.png"
                class="w3-circle"
                alt=""
                style={{ width: "50%", borderRadius: "50%", marginLeft: 150,marginTop:-40, backgroundColor:'white',padding:10 }}
              />
            </div>
            <div className="col-sm-6">
              <p style={{ marginRight: 230 }}>
                "Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also
                the leap into electronic typesetting, remaining essentially
                unchanged."
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PostPage;

Answer №1

If you're open to using an external library, you have the option to easily add inline styles to components through emotion.

import { css, jsx } from '@emotion/react'

const color = 'navy'

const customCss = css`
  background-color: skyblue
  &:hover { color: ${color} }
`

render(
  <div css={customCss}>
    This division showcases a skyblue background.
  </div>
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The external JavaScript is not functioning properly, causing the failure of the element function

I'm new to learning JS and I'm struggling to get a function to run successfully using external javascript. I can't figure out what's going wrong. The strange thing is that it works fine with inline javascript, but not with external. Bel ...

Using Angular 4 to retrieve a dynamic array from Firebase

I have a dilemma while creating reviews for the products in my shop. I am facing an issue with the button and click event that is supposed to save the review on the database. Later, when I try to read those reviews and calculate the rating for the product, ...

Utilizing ng-model and ng-repeat in AngularJS to populate models with a list of objects

I need to call a POST function, and I have to compress the data in a web form into an object beforehand. I utilized ng-repeat to showcase all inputted data and initialized this value for input, but I am unsure how to utilize ng-model to store the data. I c ...

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

New to React and looking for guidance on implementing .forEach or .includes in my code

My task involves going through an array and checking if a string that the user inputs into the form exists in it. This can be achieved using forEach or .includes method. I am basically trying to filter out the array based on the input. If someone could de ...

Using jQuery to set the background-image on the body's after pseudo-element with CSS

I am currently utilizing body:after for setting the page wallpaper. body:after { background-image: url('assets/img/wallpapers/<?php echo $getWallpaperFile; ?>'); } CSS content: ' '; display: block; position: absolute; left: ...

WebStorm: React and Bootstrap autocomplete feature fails to function

After installing React and Bootstrap in WebStorm, I encountered an issue where the Bootstrap code highlighting was not working. Despite JSX functioning correctly, the problem with Bootstrap remains unresolved. Can anyone provide guidance on how to resolve ...

I am wondering why the content is not showing up when using state.map(foo => <>{foo}</>) in my code

Why does the first tsx code display the state.map properly while the second code displays nothing? Despite both pieces of code performing the same task in the same way, one list is correctly displayed while the other state.map has never rendered anything, ...

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

I am trying to style three colored HTML div tags displayed inline-block by using CSS only. The challenge I am facing is getting the blue div to appear on top of the red and green divs. My goal is to achieve a layout where the blue div overlaps the other tw ...

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

The implementation of next-pwa's service worker file (sw.js) seems to be redundant and does

I am currently developing a NextJS application that utilizes next-pwa and functions smoothly in the local environment. However, upon deployment to Vercel, it appears that the sw.js file is unnecessary. Despite investing numerous hours into this issue, I st ...

Is there a transparent space in a PNG image that covers the the anchors located beneath

I've been working on this design which you can see at My plan is to incorporate various animations and transitions, so I have inserted each layer separately (the island, individual clouds, buttons) as images. Unfortunately, I haven't been able t ...

There seems to be an issue with the React 15 setState function not working on

My react setState after action isn't functioning properly. handleChange = () => { this.setState({foo: 'bar'}); < - it's working console.log('hellow') < - not working, console is clean } I have double-check ...

Is it true that accessing refs does not function properly in a stateful component in React?

Currently, I am in the process of refactoring the simple-todos tutorial for meteor by utilizing presentational and container components. However, I encountered an issue when attempting to access the refs of an input within a functional stateless component. ...

When you initiate a prevent default, both the Angular and Bootstrap UI tabs will become active simultaneously

I am facing a CSS issue while utilizing Angular UI-Tab. The problem arises when I have two tabs and need to stop tab switching based on a specific condition. To achieve this, I implemented prevent default. However, the CSS displays both tabs as active bec ...

Tips for creating visually appealing tables in ReactJS

For my school project, I need to create a table using ReactJs. I have already created the table but it needs improvement in terms of design. However, I am unsure how to modify my code to achieve the desired look. I tried looking on YouTube for tutorials, b ...

Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though t ...

Prevent the border from shrinking upon being clicked

I'm currently working on customizing an accordion using jQuery for the animation effects. However, I am facing an issue where clicking on the accordion header causes the border around the plus sign to shrink in size as well. My goal is to only have th ...

The Django static files were uncooperative and refused to function

I've encountered an issue with my HTML files while using Django. Some files work perfectly fine when I load static files, but others don't seem to cooperate. I'm perplexed as to why this inconsistency exists! Have I overlooked something impo ...

the secret to accessing the most recent state value post-update within a function

My current issue involves retrieving login user details and updating the state with that data for further processing. Unfortunately, it takes around 2-3 seconds to update the state and make use of the information. To address this delay, I have found a sol ...