Dynamic tables that reorganize when viewed on different devices

While working on a responsive website with Magento v1.8, I encountered a challenge in making the header responsive. I attempted using div but couldn't get it to work as expected. Switching to the table method has brought me halfway there, but I'm still facing some issues.

My goal is to achieve the following layout:

[___Logo____][___Search_____][___Cart_____] (100% screen width)

When the resolution changes (mobile/table), it should transform into:

[___Logo_______]

[___Search_____]

[___Cart________]

Currently, the header collapses 3/4 of the way, and the cart overflows off the screen. When further shrinking the screen, they stack, but with misaligned elements.

Here is what I have done so far:

<style>


@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class=headermobilewrapper]{width:100%!important; height:auto!important;}
*[class=w320]{width:320px!important; height:auto!important;}
*[class=split]{width:320px!important; float:left!important; display:block !important;}  


</style>


 <?php $config = Mage::getStoreConfig('themessettings', $_GET['store']); ?>


 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headermobilewrapper" align="center" bgcolor="#f3faf0">
   <tr>
     <td style="vertical-align:middle" class="split"> <a href="http://dev2"><img src="/images/header/header_logo.gif" ></a> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('topSearch'); ?> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('cartTop') ?> </td>
   </tr>
 </table>

I am open to changing formats, styles, etc., and have already explored various methods from Google and other sources. However, I seem to be missing something or perhaps the desired outcome is not achievable yet.

htmlcssmagentoresponsive-designhtml-table

Answer №1

It's recommended to use table, td, tr with display: block

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table, tr, td {
        display: block;
    }
}

http://jsfiddle.net/3ernd8up/

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

Unable to scroll through embed code on iOS responsive devices

-webkit-overflow-scrolling: touch; overflow-y: scroll; I have attempted using this code but unfortunately it is still not functioning as expected. The issue seems to only occur on iOS responsive devices, as it works fine on other devices including MAC. ...

iosiphonecssresponsive-designresponsive

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...

javascriptjquerycssjquery-animateslideshow

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

javascriptcss

Uncertainty surrounding the application of class selector within CSS

Currently, I'm deep into my CSS learning journey on Progate.com. I've been cruising through the exercises, but I hit a roadblock when it comes to a specific class selector in the CSS code. The task at hand is simple: I need to tweak the CSS so th ...

htmlcss

Use jQuery to manipulate HTML elements

I want to dynamically change text in a div using jQuery when clicked. Here is an example: $(document).ready(function() { $("#hideall").click(function() { $("#hideall").html("<p>SHOW</p>"); }); }); The HTML code for this is: <div id="hidea ...

jqueryhtmlclick

Ways to customize the hover effect for react-bootstrap navbar link

I'm looking to update the hover effect color from white to green, but I'm having trouble finding the correct CSS code for it. <Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate ...

javascriptcssreactjsreact-bootstrap

Choose Your Price - Price Grids

I need to incorporate two sets of pricing columns into a website. The first set is for regular car cleaning prices, while the second set is for larger cars with slightly higher prices. My idea is to have two buttons at the top – one for regular cars and ...

javascripthtml

Challenges Encountered with Random Image Generator in JavaScript

I am encountering an issue with a script that is supposed to change the default images to a random image each time the page is refreshed. However, I keep receiving an error stating that boxID is null. Why is boxID null? <script type="text/javascript" ...

javascripthtml

What is the best way to set the cell width for two HTML tables with varying numbers of columns?

If I were to create 2 different sets of tables like this: <table id="Table1"> <tr> <td></td><td></td><td></td> </tr> </table> <table id="Table2"> <tr> < ...

htmlcsshtml-table

The pause button will still function, even if the scrolling feature is enabled

I've successfully implemented a feature that pauses and plays the video on scroll when it reaches a certain pixel height. However, I'm facing an issue where the code automatically plays the video whenever the scroll position is more than 13500px ...

javascriptjqueryhtmlcss

Altering the look of a button as you navigate to it by tabbing

Check out this code snippet: In my design, I have set it up so that the user can tab through the username field first, then the password field, followed by the login button and finally the navigation tabs labeled "Getting Started" and "Vegetables." The i ...

htmlcss

The Flutter image blurs into a striking combination of red and black as the screen dimensions are altered

https://i.stack.imgur.com/YeZa6.png Hello everyone, we are facing an issue with Flutter web. Here's what's happening: When we use flutter run -d chrome --web-renderer canvaskit and flutter run -d chrome --web-renderer html, nothing changes. If ...

htmlfluttergoogle-chromeresponsiveflutter-web

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

I am facing challenges in retrieving the accurate data for display from Mat-Select and Mat-Checkbox components. My goal is to capture the selected values from users and perform if-else statements to validate conditions, displaying the correct data view if ...

javascripthtmlangularangular-material

What is the process for transforming the search bar into an icon located at the top of a WordPress site?

For the past few weeks, I've been attempting to convert the search bar on my website (which is currently a plugin) into an icon positioned near the header. I've experimented with modifying the child theme's functions.php, the parent theme&a ...

phpcsswordpress

Navigate to a specified div using JavaScript

I'm having an issue with my navigation bar not scrolling to the designated div. Despite looking at other examples, I can't seem to find a solution <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> ...

javascriptjqueryhtmlcss

Is there a way to position labels above their corresponding elements using this customized input style?

My CSS for styled inputs has become too complex, making it difficult to remove and fix certain elements. Specifically, I am facing issues in getting labels positioned above my input fields, select options, and output section. /* Cus ...

htmlinputlabelbootstrap-5

Attach functions to elements added dynamically

I've been struggling with trying to attach functions to newly added elements using jQuery. Despite experimenting with various online examples, I haven't been able to get anything to work properly. My setup involves a form with an ID and a button. ...

jqueryhtmlajax

What is the best way to ensure an image fits perfectly within a div container

I'm attempting to design a straightforward card layout where the image spans the entire width of the container div. My vision is for it to resemble something like the example in the linked image below. https://i.sstatic.net/X5oJD.png I experiment ...

htmlcss

How to dynamically inject HTML content from a child component into a different component using Angular 5

Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property. My concern is how to dynamically inject different H ...

htmlangulartypescriptangular-components

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss