flex to align pagination in list format

using flex to turn a unordered pagination list into a horizontal list

Wordpress template with fixed sidebar in flex

Left Fixed nav with right fluid content

left fixed nav section with right fluid section css and html using flexbox

css html vertical center

seems to break this layout... there must be a better way... 

six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

four box grid css html custom

re-usable four box grid with gap calculations

4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

Kinda Crappy 3D button code

use an image in your list items ol ul li

replacing the default ul li list with an image prefix

Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

make clickable element with clickable class open link in new window

makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..

show views list function

list items by the view count

list page links function list_page_links

list top number of page links from selected table test run time on db of 4k items.  select * from pages where publish = 'publish' order by insdate desc limit 10 10 rows (0.005 s)

Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated

I had this error on a function that i was not even sure i was calling. This was on some old code i was testing for an old site, i must have fixed this error on a never version of the function.  ..

chart js line chart dont show below 0 and add axis labels

Now we take the chart js chart and add some axis labels on x and y using the same options values. This will also add axis labels to the chart on the x and y axis Javascript options: { scales: {..

chart js line chart dont show below 0

had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue.  Javascript options: { scales..

Simple Line chart with Chart.js

a nice simple line chart example with fill using chart.js

Boots Widget change from widget to cat head and click function

Moving this from the widget area to the bottom, to make it less obvious but still there if needed.   

Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

Chat GPT slick slider code testing

slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..

Flickity - autoPlay with Loop

Flickity slider with auto play

pulse map dots

bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below.  modified from here: e.g: 

subscribe to newsletter section example

Map Image with Easy Dots and Titles using only CSS

I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..

Search Duplicating Bugs

Still having issues with the word above duplicating, not sure why.  Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..

floating message box on bottom right of screen with close button

A floating fixed message box on the bottom right hand side of the screen with a close button. 

set a css grid to auto to make it stack on mobile

to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size.  In this example once the screen size gets to 1024px or les..

truncate text with line clamp allow a certain number of lines

This shows how you can truncate text to a certain number of lines using the css property line-clamp.   -webkit-line-clamp: 3;  line-clamp:3;

using the :user-valid CSS pseudo-class

It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.

add a button to an existing link using :after css

Adding a button style to an existing link using :after and css. Preview

bouncing loader animation in css

uses css and keyframes animation to create a nice and smooth bouncing loader

html and css hoizontal simple timeline section in foundation

a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!..  :P Also works on responsive and mobile dev..

Javascript Objects Notes

As javascript objects are used so often in javascript i thought i would write an overview and some notes on how they work, well how they work for me anyway. I guess how they work for me should be simi..

center a box in the middle of the screen

and then center everything in that box as well

Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links

Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them.  I wanted to extract the top searches and the latest searches by da..

generate view statistics widget in php class extend

How i generate the Week, Month and Year view statistics widget for this site.  Views Widget Function This generates the widget based on the views data. PHP // views widget /* using fi..

Slick Slider Showing Multiple Items at a time

Just wanted to test some review type items showing more than one on slick, Seems to work well.  This shows two items at a time, but you can show as many as you like. Could be good for a testimo..

CSS Only Table Stacking Solution

add a toggle with jquery and change the class

With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off.  Here is t..

function to delete older sqlite records when the limit is reached

I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..

Darkmode JS - Add darkmode to your site with one script

This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit.  Darkmode JS Example Source Links https://darkmodejs.learn.un..

center align vertical 2 items in a container flex

i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..

simple javascript no library accordion

a simple button and div based accordion with a toggled indicator

Using CSS Grid instead of Float's for a 3 column simple list

I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually.  But i thought i probably should update the defaults in by ..

button zoom effect with expanding background

Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..

youtube search api request function

This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..

list all array json function list_all_array_json

I wrote this a while ago, and i always forget the complex functions i write so ill add it here.  This loads all fields and then returns them as json. 

scroll left animation

list_all_array an early stages of list all function that uses an array to pass in main variables

I think this is more neat than passing in individual variables into the list_all function, seems to work ok so far.  Still in early stages of this listing function, more needs to be built into i..

replace singular variable assignment with an array loop and variable variables

I found this useful when passing in an array to a function, rather than assigning all the variables in the function manually from the array just loop through each item in the array and asign them that..

set a cookie on click and then check if the cookie is set and dont show that message again

this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.  The cookie in this example is set to expire in a day, so then if you com..

using css counter-increment to add numbering to elements

i just found this element in css where you can add numbering to elements, very handy to add counters and things.  This uses the counter-increment: section; in the main element and then adds the ..

Create a Complex JSX Element

JSX must return a single element, so you must wrap your items in a div element you cant just return a bunch of p tags.  Define a new constant JSX that renders a div which con..

timeline class and function

this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..

views list function for checking what views have been made on the current week

this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..

Idea: Google Font Dropdown Selector Code

just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag.  Loading the fonts Gist : not tested https://gist.github.com..

using wp_nav_menu to show a custom menu in wordpress

found this quick code snippit here, its not working just for reference of what the array items do.  Here is how you would display the menu called "Projects" PHP         $..

hidden scroll anchor for custom scroll position

just incase you need to link to a scroll anchor that is not in the place where you need it.

How to record your own page views with PHP, and make them into weekly monthly and yearly charts

Building a better Simple Page View Counter Currently this site has a very basic view counter on it.  Here is how it currently works. Load the page, function checks if the page has a existing r..

change selected color on input elements css

this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..

change the border radius of an element with javascript only

function to load one latest item with a start val load_latest_single_num

This is the same as load oldest item based on insdate then update the insdate to now - load_latest_single_update but it allows you to add a start number to the range, so allows you to access the 2nd, ..

creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

how to bundle css files together using windows or mac

so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows.  lets say i have these css files main.css style.css..

button with separated chevron

I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found.  Chevron Detached Button Ex..

PHP/SQLite - Load Random Item

loads a random item from the current class / db using sqlite.

extract youtube image from video url

showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..

vertically align text within a fixed height div using flex

this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..

white space break word css

controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..

CSS Drawing - Beach Scene

i did this one a while ago, cantr even remember it just appeared when i searched in google.  here is an animated version, check the bottom for the css version of this:  

404 Error Page Codepen

found this in my links the other day, still looks cool...

right align something in its element

easily align a block or inline block item to the right in its outer element

hide the third row in a table with css

just wondered how hard it is to hide the third column in a table with css, rather than deleting it in the html here is the test table cell 1a cell 2a cell 3a cell 4a cell 5a cell 1b ..

how to make a transparent logo white with css

lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo.  well with this css trick you can just make t..

this is a weird one table underline appearing and dissapearing on mouse over

very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..

use a list group for listing by category page [todo]

change this to a list group, should make it neater. Page to update: https://kruxor.com/list-category/code/  so for some reason this is listed using this function PHP $list_wiki_menu = $clas..

jquery toggle menu testing

using jquery toggle to show and hide the sub menu's

Comments Listing should be a custom list rather than using search

For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..

load the latest single item only

this function loads the lastest item from the selected class

load oldest item based on insdate then update the insdate to now - load_latest_single_update

i keep finding these functions that i wrote ages ago and forgot about so ill list them here so maybe i can remember them. I think this one was to loop through items, so it grabs the oldest item and t..

hero widget header - creates a nice looking hero item from a target uid and class

this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..

counting the occurrence of words in a multidimensional array

array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..

backdrop-filter: blur(10px);

just testing this filter

check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..

wordpress category list sorting custom

rounded click me button with icon

just a rounded button with a font awesome icon

using text-stroke to add a border to your text

this is quite good for webkit enabled browsers, and most of them are these days.  Check what is supported: https://caniuse.com/?search=webkit-text-stroke   

slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..

animated rings expanding with delay ripple water effects

just testing this one

using the last-of-type css selector to remove a border from the last item in a list

i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones.  This allows me to target the..

Testing

test <p>test</p> x .my-selector{ value:1px;} HTML <table></table> CSS .css{} Javascript function test() { console.log('test'); } PHP a = 1; x x

box hover over effects using pulsate animation

Bit of a different box hover over effect. Just using the pulse animation.

box shadow example(s) - drop shadow

I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it.  Related Pages: https:/..

add a youtube video preloader function, lazy load youtube [fixed]

I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..

spin rotate an element on mouse over [css]

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

style page numbers [fixed]

need to style the page numbers. https://kruxor.com/list-table/search_links/  Before: After: Dark Mode Light Mode  

explode a string into an array

This uses the php explode function to split a string into an array based on a delimiter character. I always forget which order this goes in.

checking the current url and then marking a link active based on that url

i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..

linking search results to view pages [finished] 🤣

I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..

badge border colour is too dark or light on number badges [fixed]

I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..

top bar overflow issues [fixed]

So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..

make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..

test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

nice webkit scrollbars (scroll bar, web kit, nice)

use an emoji on your list items ul li

I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.

CSS Grid Frame Work

8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..

download icon svg

a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..

using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen.  Plugin Link..

Monitoring Visible Objects on Screen

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

css perspective and transform css properties testing

i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird.  with the ..

hero box with title sub title logos and call to action buttons

Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..

simple table stripe striping

this uses the nth-child(even) element to add color striping to the following table test table x       x     x           &..

center everything in a div with flex-center (centre)

i usually add this to my base css styles, as a way to easily center something in the middle of an element.  then you just add this flex-center class and everything will be horizontally and verti..

extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..

Custom JS Tabs - No Jquery or Jquery UI

switching stack order of floats with flex

responsive stacking, changing the order of how they stack. so by default they should stack in order they are listed in, like if the pink box is 1st then it should stack on top of the blue box when it ..

scroll to top html css and js

add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..

stretching an image to fit in a banner image with gimp

sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..

adding pulsating dots to your css ul li list

get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

hide parts of a form until the 1st item is selected

this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements

css using perspective for transforms

just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..

list items matching a category title

this is just raw at the moment, not tested or working. this is matching a category number at the moment so would need an additional way to link that number to the category name, or know what the categ..

simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

Nginx Server Block with Rewrite

Nginx Server Block with Rewrite Here is a basic nginx server block with rewrite to the index.php file. So it takes all the parameters and passes them into the index, into the variable $p or $_GE..

Complex Arrow Function Example

Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.

target data attribute with css

you can add a data attribite and target it with css using the following demo

keyframe animations css

moving a background with css keyframes

using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..

using flexbox to align elements in a row

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

Viewport width and height calculations

Rather than using px and em you can also use the vw and vmin to resize elements which depend on the width and height of the display.

Making an image responsive using css

the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..

Applied Accessibility - Tab Index

using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..

Using nth-child css to hide list items or repeated elements

Lets say that i have a list like this: <div class='my-awesome-list'><div class='a-list-item'>yay im a list item</div><div class='a-list-item'>yay im a list item</div><..

Using Flexbox rather than Floats

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

hide and show elements with js using getElementById and style.display

css :active pseudo-class usage

The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.

truncate string using jquery

.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..

change favicon with jquery

Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..

load google sheet data into json string with jquery

Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..

scrollbar replacement simplebar

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..

testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

random string generator guid

a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..

stacktable jQuery plugin for stacking tables on small screens

stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..

jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

make clickable element with clickable class

makes an element with a link into a clickable element

simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page

form elements australian state list

A list of the Australian States converted into a form element select option dropdown. Sorted in alphabetical order.

using foundation 6.4 xy grid basics

Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..

youtube embed no controls auto play iframe

Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..

youtube embed iframe

<iframe width="100%" height="340" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>

Form elements New Zealand region list

A list of the Regions of New Zealand converted into a form element select option dropdown. Sorted in alphabetical order. Ready to paste into your own form.

border box reset

with a bonus transition to all * { box-sizing: border-box; transition: all 0.2s; }

css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..

css grid sidebar main content fluid layout

I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..

transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..

recreate marquee element using css

as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..

click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

remove border glow css from textarea on select

how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..

transform rotate a hexagon in css

if you ever needed a hexagon in css here is how you can do it.

flex align center vertical horizontal

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

simple dropin wordpress dropdown navigation css

this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..

css accordion basics

can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..

table border collapse

I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..

stack a table using css responsive

this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..