Enhancing the background with curves for optimal viewing on mobile devices

I'm currently pondering if I should create the shapes manually or simply use a background image to achieve the desired effect on mobile view.

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

Any input or guidance on this matter would be greatly appreciated.

As of now, I've made an attempt to fashion 3 parts of shapes, but the values are hardcoded which may lead to inconsistency across different devices.

https://codepen.io/2EZHenry/pen/MWqaVXz

<div class="outerdiv"> 
  <div class="container">
    text
  </div>
</div>

.outerdiv {
  height:400px;
  width:200px;
  border:1px solid black;
  display:flex;
  align-items:center;
  justify-content:center
}

.container{
  height:50px;
  width:100%;
  background:blue;
  position:relative;
}

.container::before{
  content: "";
  left: 0;
  height: 180px;
  position: absolute;
  width: 100%;
  bottom: 100%;
  background: blue;
  border-top-right-radius: 100%;
}

.container::after{
  content: "";
  left: 0;
  height: 180px;
  position: absolute;
  width: 100%;
  top: 100%;
  background:blue;
  border-bottom-left-radius: 100%; 
}

Answer №1

Following Anil's advice, utilize relative units and implement media queries to customize CSS for different devices.

@media only screen and (min-width: 275px) { ** add your customized css here ** }

@media only screen and (min-width: 769px) { ** apply necessary changes in the css ** }

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

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is it possible to declare a value in variable A and then access that value as an id in variable B using the method getElementById()? var A = 10; var B = document.getElementById(A); console.log(B); ...

Changing the name of the static folder in React when building the application

Is there a method to change the name of the "static" directory while running "npm run build"? ...

Ensure that the HTML link is valid and authenticated using SESSIONS

When creating a website, one of the initial tasks I like to tackle is adding links at the bottom of the page for checking valid HTML and CSS: HTML5  •   CSS <div> <a href="http://validator.w3.org/check?uri=referer" ...

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

Combine consecutive <p> tags within a <div> container

Can you group all adjacent <p> elements together within a <div> element? For example, assuming the following structure: <div class="content"> <p>one</p> <p>two</p> <h2> not p</h2> <p>thr ...

After a two-second period of inactivity, the buttons on the item should trigger an action

I have a scenario in mind that I want to implement: When the user clicks on either the "Plus" or "Minus" button. If the user doesn't click on any of those buttons within 2 seconds, then we assume that the current quantity should be sent to the server ...

Starting Array index value at 1 in React js: A step-by-step guide

Is there a way to make the index value start from 1 instead of 0? {props.useraccountListData.useraccountTypeList.map((item, index) => ( {index} ))} The current output is starting from 0, 1, 2. However, I would like it to start from 1, 2, 3... ...

Guide on how to conditionally render Container Classes

Initially, the designer provided me with this: Essentially, a category is passed from the previous screen. Through some UI interactions, I have to render this screen repeatedly. The flow goes like this: you choose a category, if it has subCategories, allo ...

If a <section> element contains a <header>, must it also include a <footer>?

Here is the current state of my code: <section id="one"> <h2>Section Title</h2> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <section id="two"&g ...

My strategies for addressing caching problems in my ReactJS site

Currently tackling ReactJS projects on a website with the URL . Things seem to be running smoothly, until my SEO-savvy friend pointed out an issue with caches. He advised me to visit this cache URL: , where Google should display the main page but instead s ...

React Higher Order Components (HOCs) are functioning correctly with certain components but not

I have encountered an issue where using a Higher Order Component (HOC) to bind an action to various types of elements, including SVG cells, results in unintended behavior. When I bind the onClick event handler normally, everything works fine, but when I ap ...

What is the best way to retrieve the row IDs in react-table?

Using table-v7 and attempting to implement a delete modal, but unsure of how to retrieve the ids of my rows and set them in my axios request The function is located in a hook file, and if I use row.original._id, I can obtain the id but it only works withi ...

My webpage is struggling to locate the CSS stylesheet

Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...

Display a border around the MUI Icon button upon clicking

I added an IconButton to my website, but when clicked, it displays a border and loses its animation. Additionally, I'm looking for guidance on how to link functions to the + / - buttons in order to increase or decrease the value in the text input fiel ...

Tips for featuring the latest blog post at the top of a NextJS blog

I have a website built on Next JS with a blog page. The setup is correct, where the /blog page displays content based on slugs. Currently, new blog posts are appearing at the bottom of the page, under older ones. I want to reverse this so that when a new p ...

Navigating the Path: Strategies for Caching Server-side Rendering in Next Js

I recently developed a Next JS Project along with a REST API implemented in PHP. My website is heavily reliant on API requests, which has prompted me to consider caching certain data points. I want to minimize the frequency of API requests for improved ef ...

Tips for modifying the data type of a property when it is retrieved from a function

Currently, I have a function called useGetAuthorizationWrapper() that returns data in the format of { data: unknown }. However, I actually need this data to be returned as an array. Due to the unknown type of the data, when I try to use data.length, I enc ...

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

Is it possible to make a DIV adjust its size automatically when the browser is resized?

Greetings! Here's my initial query, with more to follow. I've encountered an issue where a div on my page is set to 70% of the screen, but upon resizing the browser to a smaller size, some content within the div extends past the bottom of the pa ...

When utilizing the map function to render an array of objects, React encounters an error

My React application is throwing an error when using the map function. Interestingly, the code works fine in a sandbox environment. Error: ENOSPC: System limit for number of file watchers reached, watch. After creating a new React project, the error dis ...