Creating a responsive design with dual backgrounds using Tailwind CSS

I have a design in Figma that I want to convert to React using Tailwind CSS while maintaining 100% pixel-perfect accuracy. The design is created for a Macbook Pro 16 inch, which has a width of 1728px. However, I want to center the content within a customized container with a width of 1300px. This way, when viewed on a wider screen, the content will be centered within a 1300px container while the background extends to fill the remaining white space on either side.

Here are some specific instructions:

  1. The background should span the entire viewport width: To ensure that the background stretches to the full width of the browser window regardless of screen size
  2. The content container should have a max-width: Limiting the content inside a central container to 1300px prevents it from becoming too wide on larger screens, thus improving readability and layout control
  3. Center the content container: Keeping the container centered within the viewport when the screen width exceeds 1300px

What is the best method to achieve this?

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

cssreactjsresponsive-designtailwind-csstailwind-in-js

Answer №1

To achieve a balanced layout, adjust the main content width to 90% and center it using margin: 0 auto. This setup will create white space on both sides of the content.

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

What could be causing my Express server to return a 404 error when trying to submit the form, all while failing to display any console

Having trouble setting up multi-user sessions similar to Google Docs, but my server file seems unresponsive. I've double-checked my fetch function and ensured it is accurate, yet no changes are occurring. Even console.logs from the server file command ...

javascriptnode.jsreactjsexpress

Avoid allowing users to accidentally double click on JavaScript buttons

I am working with two buttons in a Javascript carousel and need to prevent users from double-clicking on the buttons. Below is the code I am using: var onRightArrow = function(e) { if (unitCtr<=unitTotal) { unitCtr++; TweenLite.to(p ...

javascriptcsshtmlcarousel

Using div elements to mimic the layout of tables with row spans

<div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> .box1 { border: 1px solid red; float: left; width: 20px; } .box2, .box3 { ...

css

Managing data retrieval within React SSR frameworks for components outside of routes

As I delve into the world of React SSR frameworks like Next.js, Remix, and more, a burning question arises regarding data retrieval in components not linked to specific routes. Typically, these frameworks handle data loading at the route level, but what ab ...

reactjsnext.jsremix.run

Top method for changing an array in javascript

I'm in the process of building a react application, and I've received the following array from an API call. var arrayLike ={ "2020-W1": [ { "type": "TAX_REFUND_IN_INT", &q ...

javascriptarraysreactjs

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...

cssreactjsformsmaterial-uijss

The action is undefined and cannot be read for the property type

Using the React+Redux framework, I encountered an error: https://i.sstatic.net/0yqjl.png During debugging, the server data successfully reached the state, but the action was empty: https://i.sstatic.net/41VgJ.png Highlighted below is a snippet of my co ...

javascriptreactjsreduxreact-redux

There was an uncaught TypeError encountered in the promise because it is not possible to set properties of a null value, specifically the 'srcObject'

encountering Issue in Context.jsx import React, { createContext, useState, useRef, useEffect } from "react"; import { io } from 'socket.io-client'; import Peer from 'simple-peer'; const SocketContext = createContext(); const ...

reactjs

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

htmlcssmobilesassresponsive

The combination of Material UI nested theme providers can disrupt the functionality of the withStyles H

My React application was developed using Create React App and incorporates the @material-ui/core npm package for theming. To customize components, I make use of the withStyles higher-order component provided by MaterialUI. The documentation mentions supp ...

reactjsmaterial-ui

"Utilize axios in React to interpret and handle error bodies captured through parsing as a ReadableStream

When I sent a post request using axios in a React form to a PHP server, I encountered an issue where the error returned a ReadableStream in its body. However, when I used Postman, I did not have this problem and received readable errors instead. How can I ...

javascriptphpnode.jsreactjsaxios

The list-image is nowhere to be found

Seeking assistance with my LI style CSS. Visit this link for reference I'm having trouble getting an image to float on the right side of my sidebar links, and my content is overlapping with the sidebar... .sidebar-menu ul { font : 14px font-fam ...

htmlcssxhtml

Trouble with addClass function not functioning properly on dynamically generated list items while using search feature in Laravel 5

Seeking assistance with a search form that allows users to search for products. Search Form: <form class="navbar-form pull-right no_padding m_top_0 m_bottom_0 formSearchProduct" role="search" onsubmit="return false;" autocomplete="off"> <inp ...

phpjquerycssajaxlaravel-5

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

As a newbie in HTML, my knowledge is limited to finding a solution in C#. I am attempting to extract each line from a .txt file so that I can randomly display them when a button is clicked. Instead of using a typical submit button, I plan to create a custo ...

javascriptjqueryhtmlcss

Adding a unique key for the Ant Design switch component in ReactJS is essential for optimizing

I'm facing an issue with assigning a unique key to the switch within my loop. Current Outcome: Clicking on one switch toggles all switches simultaneously. Desired Result: Only the selected switch should toggle, not affecting the others. Below is th ...

reactjsantd

Tips for effectively eliminating errors in a redux store

Within my react-redux application, I have implemented a system to catch error responses from redux-saga. These errors are saved in the redux-store and rendered in the component. However, a major challenge arises when trying to remove these errors upon comp ...

javascriptreactjsreduxreact-reduxredux-saga

Is there a way to iterate through two arrays simultaneously in React components?

Recently delving into the world of React, I am utilizing json placeholder along with axios to fetch data. Within my state, I have organized two arrays: one for posts and another for images. state = { posts : [], images : [] ...

javascriptreactjsreact-redux

Encountering an issue where an error is being thrown, stating "Unhandled Rejection (TypeError): history.push is not a function," while implementing an action creator with

Encountering an issue when handling the submit function on this form component that utilizes redux-form. After receiving a success promise in the action creator, the user is supposed to be redirected to /contacts. However, an error occurs with Unhandled Re ...

reactjsreact-reduxjsxredux-formreact-router-dom

How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method ...

javascriptcssreactjsmeteormaterial-ui

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss