Transferring a moving CSS element from one div to another

Can you please advise on the most effective method for moving an element between divs in responsive design?

This is the current structure of my page:

        <div class="container">
         <div class="desktop"><h2>Hello, I am displayed on desktop</h2></div>
         <div class="mobile"><h2>Hello, I am displayed on mobile</h2></div>
        </div>

I have implemented CSS media queries to toggle between displaying the mobile and desktop versions, which is functional. Is this the recommended approach?

cssresponsive-design

Answer №1

Consider beginning with mobile design for the page and then incorporate elements needed for desktop viewing. Strive to maximize sharing potential while avoiding repetition of content on the same page.

<div class="container">
    <h2>Greetings world!</h2>
    <div class="desktop">
        This is an extended section visible exclusively on desktop devices.
    </div>
    <p>
        This text is accessible on both mobile and desktop views.
    </p>
</div>

Don't forget to explore bootstrap http://getbootstrap.com - a versatile tool that offers dynamic image and column resizing. It's a valuable resource that could potentially streamline your work process.

Answer №2

There really isn't a definitive right or wrong way to do it, but the method you've chosen is perfectly adequate.

.desktop{
  display:block;
}
.mobile{
  display:none;
}

@media all and (max-width:400px){
  .desktop{
    display:none;
  }
  .mobile{
    display:block;
  }
}

In my personal approach, I opt for using just one div that adapts responsively.

.desktop{
  width:100%;
  font-size:1em;
}
@media all and (max-width:400px){
  .desktop{
    font-size: 0.7em;
  }
}

Answer №3

Absolutely, you're on the right track. Utilize media queries for the two distinct classes as illustrated below.

.mobile,
.desktop {
  display: block;
}
@media (max-width: 768px) {
  .desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .mobile {
    display: none;
  }
}
<div class="container">
  <div class="desktop>
    <h2>Hey there! I appear on desktop</h2>
  </div>
  <div class="mobile">
    <h2>Hey there! I am visible on mobile</h2>
  </div>
</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

Adjust the height of a TextField component in material-ui

index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class Sear ...

cssreactjsmaterial-ui

Eliminating the excessive space underneath the collapsible section when it is expanded

I am facing an issue with a hidden html table inside a collapsible element. Whenever the collapsible is expanded, there seems to be a substantial gap below the table. I'm unable to identify the cause of this problem. Below, you will find images and a ...

javascripthtmlcss

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

Alignment troubles persist with text formatting

The alignment of the link at the bottom of the page seems to be causing an issue. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cssforwebsite.css"/> <link href="https://fonts.googleapis.com/c ...

htmlcss

What is the best way to add a stylish border to an iframe?

My attempt to add a border to content on my WordPress site has been unsuccessful. Since I don't know how to add a CSS file, I've been trying to achieve this using what I believe to be HTML. My coding skills are limited to what I learned in high s ...

htmlcsswordpressiframeborder

Dynamic Entry: The Art of JQuery Animation

I want to achieve a sequential flying-in effect when my page loads, with each div sliding in one by one. Currently, all the divs fly in simultaneously, but I'd like them to come in sequentially. Here is my code snippet: <script> function ani ...

javascriptjquerycss

Validation for radio buttons in Bootstrap 4

Looking for assistance with form validation using Radio elements on a Bootstrap 4 page. I want to display an error message underneath the radio element: <div class="invalid-feedback">Please choose an option</div> Below is the code snippet wi ...

htmlcssformsvalidationbootstrap-4

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

csshtmlimagereactjsposition

Unable to utilize first-child CSS to establish the display

I'm currently using WordPress and it's generating the following code: <aside class="left-hand-column"> <div class="textwidget"> <p></p> ...1 <div class="pdf-download"> <p> ... 2 <a href="http ...

htmlcss

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

javascriptjqueryhtmlcss

Reducing the size of an internal label within a flex container

Hello everyone, I could really use some assistance here. The problem I'm facing involves a flex-container with tabs (the number of tabs can vary as they are passed as an array in a React component). Each tab consists of a label and a span with a numb ...

cssreactjsflexboxwidthstyled-components

Is it possible to add a class to the parent element when the input value of a sub-child element is

Is there a way to select and add a class to an li element in which the sub-child input is empty when clicking on button #btn-modal-clear? If so, what is the best approach to achieve this? Example HTML Code: <li>...<li> <li> <a c ...

javascriptjqueryhtmlcss

What could be causing my Divs to not adjust their location automatically?

When using JQuery, I have a group of four tabs that initially appear as shown below: <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">Item One</label> & ...

jquerycsstabs

disabling past dates in Bootstrap calendar

How can I disable past dates in Bootstrap easily? <script type="text/javascript"> $(function(){ $('.datepicker').datepicker(); }); </script> Date: <input type="text" class="datepicker"></input> I have added the ...

javascriptjqueryhtmlcsstwitter-bootstrap

mobile-responsive vertical alignment using Bootstrap

Here is a jsbin that demonstrates the issue and here is the markup: <div class="row"> <div class="col-sm-4 xs-12"> <strong>UK Postcode</strong> </div> <div class="col-sm-4 xs-12"> <strong>Other Fie ...

csstwitter-bootstraptwitter-bootstrap-3

The background image fails to fill the entire page

I am facing a strange issue with a website. The background image does not cover the entire page, leaving large white sections when I resize the window. Oddly enough, this problem only occurs on certain PCs or laptops. After asking several friends to test t ...

htmlcssresizewhitespacescaling

The header and sub-navigation are in disarray and require some help

Dear web experts, After six months of learning to code websites, I'm tackling a big project with some challenges. The recent changes to the header and subnav have thrown everything off balance, making it look wonky and not quite right. Specifically, ...

javascripthtmlcssheader

What is the best way to save CSS within a Django class?

Currently, I am in the initial stages of planning a Django application that will generate html5 slideshow presentations. My goal is to have the ability to customize the style of each slide object by defining CSS attributes such as colors and sizes. Additio ...

pythoncssdjangodjango-templates

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

Place a div in a location where it seems to be positioned beyond the main wrapper's width of 980 pixels

Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...

jqueryhtmlcssxhtml