Is it appropriate in responsive design to use multiple markups for the same page elements?

Currently, I am in the process of coding a responsive design that will feature various navigation layouts depending on the screen resolution. Unfortunately, I don't have the authority to make design decisions in my workplace.

While working on this project, I am facing challenges in achieving the desired layouts using only CSS modifications. I am hesitant to resort to duplicating markup for the same elements in multiple places, as it seems messy and may have negative implications for maintenance and SEO (even though non-default layouts will be set to display none initially).

What are your thoughts on this issue? Is this approach considered bad practice in web development?

Answer №1

It is perfectly acceptable to maintain your media queries at the bottom of your CSS file for optimal loading. I highly recommend utilizing a grid system with rows and columns to simplify layout design. When applying a media query, setting the column widths to 100% will stack the div elements accordingly. Additionally, ensure to adjust the navigation elements' classes and IDs for the responsive design.

Below is a sample grid system that I have developed to illustrate how navigation can be structured:

/* GRID */

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.layout-row {
    margin: 0 auto;
    width: 96em;
    zoom: 1;
}
.layout-row .layout-row { width: auto;}

.layout-row:before, .layout-row:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: "\0020";    
}

.layout-row:after { clear: both;}

.layout-column {
    position: relative;
    display: inline;
    float: left;
    padding: 1em ;
}

.layout-column .layout-column { padding: 0;}

.one { width: 8.33333%;}
two { width: 16.66667%;}
three { width: 25%;}
four { width: 33.33333%;}
five { width: 41.66667%;}
six { width: 50%;}
seven { width: 58.33333%;}
eight { width: 66.66667%;}
nine { width: 75%;}
ten { width: 83.33333%;}
eleven { width: 91.66667%;}
twelve { width: 100%;}

/* MODULES */

.layout-navigation { margin: -2em 0 0;}

.layout-navigation li {
    float: left;
    padding: 3em .75em .5em;
    text-align: center;
}

/* MOBILE MEDIA QUERY */

@media only screen and (max-width: 480px) {

.layout-row { width: 48em;}
.layout-column { width: 100%;}
.hide-mobile { display: none;}

.layout-navigation li {
    float: none;
    padding: 1em;
    background: #F3F3F3;
    text-align: left;
}
}

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 is the best way to ensure my footer remains at the bottom of the page even when scrolled?

I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. ...

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

Utilizing a 'for' loop to add a listener for a 'click' event

HTML: <li>Facebook</li> <li>Twitter</li> <li>Souncloud</li> JS: var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com']; function openURL (url) { l ...

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

I have encountered a problem with the ng2-drag-drop library. I am trying to drag and drop items from one div to another, and then freely move the dropped item within the droppable area. One issue I'm facing is that when I drop my draggable item in th ...

Ensuring form input validity in real-time using jQuery's keyup event

I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...

Is there a way to utilize jQuery to redirect to the href included in the HTML attachment?

I am looking to add a redirection feature to my website using the href provided in the code by jQuery. This will be done after playing an animation for better user experience. $(document).ready(function(){ $("a").click(function(event){ event.prev ...

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is: stWay: stProposer: stTime: hello John 2017-09-07 I have successfully programmed a button to make div1 a ...

Move the location of the mouse click to a different spot

I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

Text within cells is not wrapping onto a new line in an HTML table

Let me show you how it currently looks: https://i.sstatic.net/OeHRg.png The maximum width of the cell is working properly, but the text is not wrapping to a new line as expected. Instead, it overflows out of the cell. Here is the CSS applied to the tabl ...

The sidebar appears to be hovering above the footer section

I am currently working on creating a sidebar that sometimes ends up being longer than the main content section. You can check out my demo here: http://jsfiddle.net/y9hp4evy/1/ and another case here: http://jsfiddle.net/y9hp4evy/2/ (If I add a height to th ...

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

What is the best way to extend an inline-block element to cover the entire text line?

Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...

The antithesis of a feature that encapsulates a chosen area with a span

Hi everyone, I have a function that works as follows: define(function () { 'use strict'; var sel, range, span; return function () { span = document.createElement("span"); span.className = 'highlight'; if (window.ge ...

Exploring ways to obtain the value of an unchecked checkbox in CodeIgniter

I am currently working on an attendance system using CodeIgniter. I have a list of checkboxes and I have successfully managed to insert the checked data into the database. However, I am now trying to figure out how to insert the unchecked data into the dat ...

Expandable Checkout Form for Woocommerce

I need help troubleshooting a WooCommerce collapsible checkout form using Bootstrap Collapse. Below is the HTML markup I am currently using: <div class="panel-group" id="checkout-accordion"> <div class="panel panel-default" id="panel-billing"&g ...

Utilize Javascript to convert centimeters into inches

Can anyone help me with a JavaScript function that accurately converts CM to IN? I've been using the code below: function toFeet(n) { var realFeet = ((n*0.393700) / 12); var feet = Math.floor(realFeet); var inches = Math.round(10*((realFeet ...

Distribute the text evenly on either side of the center

I have a unique layout with two datalist elements centered, text positioned above, and two buttons integrated. body { background-color: DarkGray; } h1 { color: black; font-size: 30px; font-family: 'lucida console' } span { color: #4434 ...

Executing a function upon the loading of a template in AngularJS

I have been searching through various responses here, but I haven't come across one that addresses my specific problem. Apologies if this has already been answered. I am a beginner in angular js and have recently begun working on angular routing. I am ...