Creating a Design That Works Well on Both Desktop and Mobile Devices

I have created this design using CSS and Bootstrap. However, I am encountering an issue with responsiveness. Can someone assist me in making this design responsive?

HTML:

.ordering .spanone {
  position: absolute;
  width: 100px;
  left: 43%;
  right: 50%;
  font-size: 25px;
  top: 12%;
}

.ordering .spananother {
  position: absolute;
  width: 138px;
  left: 35%;
  right: 50%;
  font-size: 16px;
  top: 35%;
}

.ordering .spanthird {
  position: absolute;
  width: 138px;
  top: 45%;
  left: 39%;
  right: 50%;
  font-size: 16px;
}

.ordering .spanfourth {
  position: absolute;
  width: 138px;
  top: 55%;
  left: 35%;
  right: 50%;
  font-size: 16px;
}

.ordering .spanfifth {
  position: absolute;
  width: 229px;
  top: 66%;
  left: 24%;
  right: 50%;
  font-size: 16px;
}

.orange {
  vertical-align: middle;
  color: white;
  position: relative;
  background-color: #4C4245;
  height: 226px !important;
  width: 336px !important;
  z-index: 3;
  border-bottom-left-radius: 43%;
  float: right;
  margin-right: 2px;
}

.orange:after {
  content: '';
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-top: solid 113px transparent;
  border-bottom: solid 113px transparent;
  border-left: solid 109px #4C4245;
}

.green {
  color: white;
  position: relative;
  background-color: #eaeaea;
  height: 226px !important;
  width: 380px !important;
  z-index: 2;
  margin-right: 50px;
  margin-top: 2px;
  float: right;
}

.green:after {
  content: '';
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-top: solid 113px transparent;
  border-bottom: solid 113px transparent;
  border-left: solid 112px #eaeaea;
}

.green:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: solid 113px transparent;
  border-bottom: solid 113px transparent;
  border-left: solid 112px white;
}

.blue {
  color: white;
  position: relative;
  background-color: #ededed;
  height: 226px !important;
  width: 383px !important;
  border-top-right-radius: 50%;
  float: right;
  margin-right: 100px;
}

.blue:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 100%;
  margin-left: 250px;
  width: 0;
  height: 0;
}

.blue:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: solid 115px transparent;
  border-bottom: solid 115px transparent;
  border-left: solid 111px white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row margin-bottom-30 margin-top-20 ordering" style="margin-top:38px;margin-bottom:38px;">
    <div class="col-lg-4">
        <div class="orange">
            <span class="spanone">Step 1</span>
            <span class="spananother">Send us your file &</span>
            <span class="spanthird">Project Details,</span>
            <span class="spanfourth">You will recieve a</span>
            <span class="spanfifth">customized estimated link back</span>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="green">
            <span class="spanone" style="color:#4C4245">Step 2</span>
            <span class="spananother" style="color:#4C4245;width:180px">Click "Make my Sign" on</span>
            <span class="spanthird" style="color:#4C4245">the estimated link,</span>
            <span class="spanfourth" style="color:#4C4245;left:39%">You will recieve a</span>
            <span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">customized completed notification</span>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="blue">
            <span class="spanone" style="color:#4C4245">Step 3</span>
            <span class="spananother" style="color:#4C4245;width:180px">Click "Ship my Sign" on</span>
            <span class="spanthird" style="color:#4C4245;left:45%">the completion,</span>
            <span class="spanfourth" style="color:#4C4245;left:45%">notification link</span>
            <span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">Your new sign is on its way-!!</span>
        </div>
    </div>
</div>

I am familiar with using MEDIA Query to make the design responsive, but I prefer to achieve responsiveness with a minimal use of media queries.

The image created using CSS:

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

htmlcsstwitter-bootstrapresponsive-design

Answer №1

Give this a shot. I've put my best effort into it. Take a look.

.ordering span{
  font-size:16px;
}
.ordering .spanone {
  position: absolute;
  width: 100px;
  left: 43%;
  right: 50%;
  font-size: 25px;
  top: 12%;
}

.ordering .spananother {
  position: absolute;
  width: 138px;
  left: 35%;
  right: 50%;  
  top: 35%;
}

.ordering .spanthird {
  position: absolute;
  width: 138px;
  top: 45%;
  left: 39%;
  right: 50%;  
}

.ordering .spanfourth {
  position: absolute;
  width: 138px;
  top: 55%;
  left: 35%;
  right: 50%;  
}

.ordering .spanfifth {
  position: absolute;
  width: 229px;
  top: 66%;
  left: 24%;
  right: 50%;  
}

.orange {
  vertical-align: middle;
  color: white;
  position: relative;
  background-color: #4C4245;
  height: 226px !important;
  width: 336px !important;
  z-index: 3;
  border-bottom-left-radius: 43%;
  float: right;
  margin-right: 2px;
}

.orange:after {
  content: '';
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-top: solid 113px transparent;
  border-bottom: solid 113px transparent;
  border-left: solid 109px #4C4245;
}

.green {
  color: white;
  position: relative;
  background-color: #eaeaea;
  height: 226px !important;
  width: 380px !important;
  z-index: 2;
  margin-right: 50px;
  margin-top: 2px;
  float: right;
}

...
...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid order_wrap">
<div class="row margin-bottom-30 margin-top-20 ordering" style="margin-top:38px;margin-bottom:38px;">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <div class="orange">
            <span class="spanone">Step 1</span>
            <span class="spananother">Send us your file &</span>
            <span class="spanthird">Project Details,</span>
            <span class="spanfourth">You will recieve a</span>
            <span class="spanfifth">customized estimated link back</span>
        </div>
    </div>
    ...
    ...
</div>
</div>

Answer №2

To make your layout responsive, make sure to use the Bootstrap class col-xs in combination with all the col-lg classes. Here's an example:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   Your content here...
</div>

Answer №3

Responsive designs in Bootstrap are achieved using specific classes. Instead of just using "col-lg-4" for large screens, consider adding classes like "col-md-4, col-sm-4, or col-xs-4" for responsiveness based on your needs.

To ensure your code is responsive, include different col- classes alongside col-lg-4.

For more information, refer to the Bootstrap Grid System.

**

<div class="col-lg-4 col-sm-4">
  "Your code"
</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

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

htmlcssbuttonformatting

Exploring the differences between pseudo-elements when styled as display:block versus display:inline

I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...

htmlcss

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

javascriptjquerycssresponsive-design

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: htt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is this an effective and appropriate method for establishing media queries?

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" /> <link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" /& ...

htmlcssmedia-queriesstylesheet

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

htmlcsstwitter-bootstrapresponsive-designless

What is the best way to activate a submit button when at least one checkbox is selected?

I checked out Mark's solution on Stack Overflow regarding disabling a button if no checkboxes are selected in Angular2. However, I have more than one array to consider. How can I adjust the code provided in the link for my situation? Alternatively, d ...

htmlangular

Gather updated information from a hover popup using Selenium and Python for a fresh data table integration

A few years ago, I successfully managed to scrape hover elements using Selenium. It was a bit challenging back then to select the correct hover table element that only appeared on hover. Recently, the website underwent a complete style overhaul, which seem ...

pythonhtmlseleniumscreen-scraping

Vue.js: Issue with applying class binding while iterating over an object

I've been working with an object data that looks like this: object = { "2020092020-08-01":{ "value":"123", "id_number":"202009" }, "2020092020-09-01":{ "value& ...

javascripthtmlvue.js

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

Recently, I decided to incorporate an external script into my project. The script in question is as follows: <script type="application/javascript" src="https://api.ipify.org"> </script> This script is designed to provide the client's IP ...

javascripthtmljson

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

htmlcssfreemarker

Anchor link leading to an incorrect location

Sorry for the potentially silly question, but I'm struggling to figure out what's happening here. I'm currently working on a website and trying to create an anchor link at . I've placed the anchor just before in this code: <a name ...

htmlhyperlinkpositionanchor

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

javascriptcsstextwarningsphaser-framework

Pasting a canvas over a div using CSS

My website features a <div> containing creatively styled rings with a design reminiscent of the android unlock pattern. The div showcases 9 dots that can be connected in various configurations. I'm looking to overlay a canvas on this setup to tr ...

jqueryhtmlcss

The core-icons icon doesn't appear as intended in version 1.2.1 of Polymer

Currently, I am working with Polymer version 1.2.1 and have included core-icons in my elements.html file using the following import statement: <link rel="import" href="/bower_components/core-icons/social-icons.html"> Within a custom Polymer element ...

htmlcsspolymerpolymer-1.0

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

Utilize a dual-color gradient effect on separate words within the <li> element

I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here: https://i.sstatic.net/Yvdal.jpg I have successfully displayed "fizz" and "buz ...

javascripthtmlcss