Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

I recently had the task of placing two images in a band on a webpage and ensuring they were responsive to different screen sizes. Image 'a' represented a circular logo, while image 'b' was a rectangular logo. The red band served as the container for these images. Despite their slightly different widths, I needed to maintain proportional spacing between 'a' and 'b'.

To achieve this, I manually adjusted the CSS properties using media queries to accommodate various screen sizes. This involved tweaking values based on visual feedback at different breakpoints:

<html>
<head>
<title>Welcome</title>
    <meta name="description" content="T">
    <meta name="keywords" content="">

    <meta name="author" content="">

    <meta http-equiv="cleartype" content="on">
    <!-- Responsive and mobile friendly stuff -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
    
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    
html,body {
    color:#ffffff;
    margin:0px;
    padding:0px;
    background: url('images/bg-1366.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
#band{
    position: relative;
    top:27.5%;
    height:30%;
    width:100%;
    max-width: 100%; 
    border:3px solid #ffffff;
    border-right-style:none;
    border-left-style:none;
    margin:0px;
    align:center;
    padding:0px;
    background-color: #000000;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
#holistic {
    float:right;
    max-width: 80%; 
    max-height: 80%;
}

#spa {
    float:left;
    max-width: 90%; 
    max-height: 90%;
}
#off {
    float:left;
    max-width: 1%; 
    max-height: 1%;
}


    </style>
    <link rel="stylesheet" href="css/col.css" media="all">
    <link rel="stylesheet" href="css/3acols.css" media="all">
 <link rel="stylesheet" href="css/media.css" media="all">
</head>    


<body>

    <div id="band">
    <div id="wrapper">
        <div class="section group">
                <div class="col span_1_of_2">
                <img id="holistic" src="Ehlogo.png">
                </div>
                <div class="col coloff span_3_of_2">
                <img id="off" src="images/off.png">
                </div>
                <div class="col span_1_of_2">

                <img id="spa" src="ESlogo.png">
                </div>
            </div>
            </div>
    </div>
</body>
</html>

    @charset "utf-8";
    @media only screen and (min-width : 320px) and (max-width : 480px) {
     .col{
         text-align:center;
         }
        #holistic {
            float: none;
            max-width: 95%; 
            max-height: 95%;
        }
        #spa {
                float:right;
            max-width: 95%; 
            max-height: 95%;
            margin-top:7.5%;
            margin-right:10%;
        }
            #band {
            top:12.5%;
            height:30%; 
        }
    }
    @media only screen and (min-width : 480px) and (max-width : 640px) and (max-height : 960px){
     .col{
         text-align:center;
         width:640px;
            max-width: 100%; 
            max-height: 100%;
         }
        #holistic {
            float: none;
            max-width: 85%; 
            max-height: 85%;
        }
        #spa {
            float:right;
            max-width: 85%; 
            max-height: 85%;
            margin-top:7.5%;
            margin-right:10%;
        }
            #band {
            top:12.5%;
            height:30%; 
        }
    }
    @media only screen and (max-width : 480px) and (max-height : 800px){
     .col{
         text-align:center;
         }
        #holistic {
            float: none;
            max-width: 95%; 
            max-height: 95%;
        }
        #spa {
            float:none;
            max-width: 95%; 
            max-height: 95%;
            margin-right:10%;
        }
    }
    @media only screen and (min-width : 640px) and (max-width : 768px) and (max-height : 1280px){
     .col{
         text-align:center;
         width:768px;
            max-width: 100%; 
            max-height: 100%;
         }
        #holistic {
            float: none;
            max-width: 100%; 
            max-height: 100%;
        }
        #spa {
            float:none;
            max-width: 100%; 
            max-height: 100%;
            margin-top:3.5%;
            margin-right:3%;
        }
        #band {
            top:12.5%;
            height:25%; 
        }
    }
    @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    
        body{
            background: url('images/bg-1280.jpg') no-repeat center center fixed;
        }
        #holistic {
            position:relative;
            top:-5px;
            left:10px;
            max-width: 90%; 
            max-height: 90%;
        
        }
        .coloff {
            width:75px;
        }
        #spa {
            float:right;
            margin-top:2%;
            margin-right:15%;
            max-width: 85%; 
            max-height: 85%;
        }
    }
    @media only screen and (min-width: 1250px) and (max-width: 1366px) and (min-height: 1024px) {
    
        body{
            background: url('images/bg-1280.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 90%; 
            max-height: 90%;
        
        }
        .coloff {
            width:75px;
        }
        #spa {
            float:right;
            margin-top:2%;
            margin-right:15%;
            max-width: 85%; 
            max-height: 85%;
        }
                #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1280px) and (max-width: 1366px) and (max-height: 799px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
                position:relative;
            top:-16px;
            max-width: 100%; 
            max-height: 100%;
        }
        #spa {
            max-width: 90%; 
            max-height: 90%;
        }
            .coloff {
            width:165px;
        }
            #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1200px) and (max-width: 1279px) and (max-height: 799px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 95%; 
            max-height: 90%;
        }
        #spa {
            float:left;
            max-width: 85%; 
            max-height: 85%;
        }
            .coloff {
            width:175px;
        }
        #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1580px) and (max-width: 1920px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 90%; 
            max-height: 90%;
        }
        #spa {
            float:left;
            max-width: 90%; 
            max-height: 90%;
        }
            .coloff {
            width:180px;
        }
        #band {
            top:25%;
            height:28.5%;   
        }
    }
    @media only screen and (min-width: 1920px) and (max-width: 2400px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            position:relative;
            top:-10px;
            max-width: 90%; 
            max-height: 90%;
        }
        #spa {
            margin-top:0.5%;
            float:left;
            max-width: 86%; 
            max-height: 86%;
        }
            .coloff {
            width:200px;
        }
        #band {
            top:25%;
            height:30%; 
        }
    }

/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
    width: 100%;
}
.span_3_of_2 {
    width: 10%;
}
.span_1_of_2 {
    width: 40.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%; 
    }
    .span_1_of_2 {
        width: 100%; 
    }
}

However, this process proved to be time-consuming and cumbersome. Constantly adjusting percentages, saving files, refreshing browsers, and repeating the cycle became frustrating. I'm now seeking a more efficient method that eliminates guesswork by utilizing mathematics, frameworks, or algorithmic workflows. My approach so far has been trial-and-error, but I'm eager to find a better solution when working with percentages and media queries. The current process took longer than it should have.

cssresponsive-designworkflow

Answer №1

Embrace the mobile-first approach! This popular mantra is rooted in practicality. Begin by focusing on styling for smaller screen sizes and then adjust for larger screens as needed.

Set your initial snap point conservatively small, fine-tune your styling, and then experiment with resizing your browser to find the optimal snap point based on content. Let the content guide your design decisions.

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

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...

csstwitter-bootstrapgruntjsless

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

htmlcss

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

phpcssjoomlaframeworksposition

Ensure that the heading cells in the table header (thead) are properly

Struggling with aligning the thead with the td in the tbody? I attempted adjusting the thead using display: table-header-group;, but discovered that padding doesn't work on 'table-header-group'. This led me to try adding padding-left to my t ...

htmlcssangularjs

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

When the click event occurs, add a class. After a delay using a timeout function, remove the added

I am currently using Jimdo and I have a section where I can edit all the codes, which is working fine except for one feature. Any assistance would be greatly appreciated! Here is the code that adds a class to an animated SVG image with its status set as d ...

javascriptjqueryhtmlcss

Achieving perfect alignment in a CSS grid for form elements vertically

One of my current projects involves creating a form layout using HTML and CSS that follows a Material Design style: <div class="form-group"> <input type="text" id="feedName" name="name" value={nameValue} onChange={this.handl ...

htmlcsscenteringcss-grid

Tips on how to dynamically load the content of a URL into a modal and update the browser address simultaneously

I am attempting to achieve a specific effect using JavaScript and jQuery Link to the content I want to load in a modal The goal is to load the content in a modal while keeping the main page in the background. Additionally, when a URL is followed, I want ...

javascriptjqueryhtmlcss

Incorporate a fresh button into the Tinymce toolbar using C# programming

I have utilized Tinymce text editor/textarea in my webpage. How can I incorporate an additional button onto the toolbar? For instance, upon clicking the added button, it should prompt a dialog with three textfields: title, age, and gender. Upon filling ou ...

javascriptc#htmlcsstinymce

Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...

htmlcss

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal ...

javascriptjqueryhtmlcss

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...

cssvertical-alignment

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...

javascriptjquerycsssliderslick.js

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

cssflexbox

What is the best way to set unique heights for various ion-grid components?

Situation: I am facing an issue with my Ionic/Angular app. The screen layout, as shown in the image provided and on Stackblitz, includes two ion-grids with different background colors - green and red. Goal: My goal is to assign a percentage height to each ...

htmlcssionic3

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

javascripthtmlcssvue.jsvue-component

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4