Mastering the art of designing responsive blocks with solely CSS and HTML

Verify:

I am interested in designing a responsive layout as illustrated below:

Desktop View:

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

Mobile View:

https://i.sstatic.net/0a8Q5.png

To achieve this design, I have implemented the following CSS and HTML structure:

    <style>
    @media only screen and (min-width:1220px){ #mobile,.mobile{display:none} } 
    @media only screen and (max-width:1220px){ #pc,.pc{display:none} #mobile,.mobile{display:block} } 
    @media handheld{ #pc,.pc{display:none} #mobile,.mobile{display:block} }
    </style>
    <div class="pc text">
    <table><tr><td><table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
    <ul><li><strong>Size : 13.11 MB</strong></li>
    <li><strong>Downloads : 12</strong></li>
    <li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
    <li><strong>Price : Free</strong></li>
    </ul></td></tr></table></td>
    <td><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></td></tr></table>
    </div>
    
    <div class="mobile text">
    <table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
    <ul><li><strong>Size : 13.11 MB</strong></li>
    <li><strong>Downloads : 12</strong></li>
    <li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
    <li><strong>Price : Free</strong></li>
    </ul></td></tr></table>
    </div>
    <div class="mobile text"><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></div>

One challenge I'm facing is that I'm using the @media CSS to alternate between mobile and desktop views by toggling display:none, which requires me to include the ad code (

<script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script>
) for the second block twice. How can I achieve the same result with the ad code included only once and without relying on tables?

htmlcss

Answer №1

Instead of duplicating content in two separate divs for mobile and web views, and toggling their visibility with media queries, it's better to include the content once in the HTML and adjust how it's displayed using media queries.

For example;

<body>
    <div class="block">
        ... content goes here
    </div>

    <div class="block">
        ... content goes here
    </div>
</body>

<style>
    @media only screen and (min-width:1220px) { 
        .block { display: inline-block; vertical-align: middle; } 
    } 

    @media only screen and (max-width:1220px) { 
        .block { display: block; }
    }
</style>

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

Trouble with the visibility and functionality of the Bootstrap navbar collapse icon

I'm currently working on a project where I want to incorporate a collapsible navbar. The issue I'm facing is that when I resize the window, the navbar collapses but the button, although clickable, does not display or provide me with any options. ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Android PDF reader plugin

Currently, I am working on developing an online PDF library application. In order to enhance the functionality, I am in search of a suitable PDF reader plugin. If anyone has any recommendations or suggestions regarding a reliable PDF reader, kindly share ...

androidhtmliosangularjsweb

Removing the gridlines in a Linechart using Apexcharts

I am experiencing issues with the grid and Nodata options on my Apexchart line chart. noData: { text: none , align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: &apo ...

javascripthtmlcssangular

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

css

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

cssreactjsreact-dropdown-tree-select

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

I need to showcase multiple duplicates of 2 different images on a webpage. Users are asked for the duplication speed, which I have already implemented, and also how many copies of each image they want. function show_image() { var img = document.create ...

javascripthtmlimageprompt

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

javascriptjquerycssselenium

Enhance your Magento store with a personalized layout update

Is there a way to call a stylesheet from my skin folder instead of pointing to my base path? Right now I have <reference name="head"> <action method="addCss"> <stylesheet>yourtheme/css/red.css</stylesheet> < ...

phphtmlcssmagento

Tips for storing the state using Localstorage?

Greetings to the person reading this message! I am relatively new to programming and I have a query... I created a Navigation bar: body > div > nav > div > ul > li*10 I have implemented the styling in CSS. //Navigation Bar const list = ...

javascriptcsslocal-storagenavbar

Ensuring DIV Stays Within Window Limits using Javascript

Hi there! I'm working on a 'box' div that moves when you click arrows. How can I make sure the box stays within the window and doesn't go past the borders? Here's the fiddle: var elementStyle = document.getElementById("divId").st ...

javascriptcss

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

Can a Dashcode Webkit Web app be transformed into traditional HTML and CSS?

I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...

javascripthtmlwebkitcssdashcode

What is the sequence in which the browser handles CSS?

I have a specific class that is being styled in multiple places on my website. I am curious about the order in which the browser reads and applies these different styles. Can you explain this process to me? Inline Style <div class="yellowtag" sty ...

css

The issue of the Dropdown Menu Not Remaining Fixed While Scrolling

There is a challenge with a Datetime Picker Dropdown Menu not staying in place when the user scrolls. Previous attempts to use .daterangepicker {position: fixed !important;} have been unsuccessful, causing the Datetime Picker to not stay fixed in its posit ...

jqueryhtmlcssdrop-down-menudatetimepicker

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

javascriptjqueryhtmlcss

Issue with displaying modal and backdrop specifically on iPhone in Angular 13

Within our Angular 13 application, we have a modal component. The component's CSS includes the :host selector for the root element, which also serves as the style for the backdrop: :host { position: absolute; background: rgba(0, 0, 0, 0.5); widt ...

htmlcssangulariphonecross-browser

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

javajavascriptjqueryhtmlfile-upload

What is the best way to send user input text to a Vue method using v-on:change?

I am trying to pass the input value from my HTML to a Vue method called checkExist(). I need to get this value within the checkExist() method. Can anyone provide advice on how I can achieve this? I am new to Vue and could use some guidance. HTML: <inp ...

javascripthtmlvue.jsecmascript-6

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask