I am using a Wordpress responsive ready theme and it works quite well except for tables or div containers.
The main problem I have are my tables as shown on: lichtundmusik.ch/vermietung/licht
What I want: When I watch the same page as mention above on my smartphone the picture should automaticaly change the order of the text and picture from horizontal to vertical
Illustration of what I want:Link to the Illustration
One more difficulty: Today it is the firt time I came a cross Bootstrap and I tried to implement it but unfortunately entering the Bootstrap code in the website header is changing the whole site.
Does somebody has a solution for me? Thanks for your answers
Since your output is a table, you're going to have to play some tricks with CSS to make this work. CSS-Tricks has a nice article explaining the basics. TL;DR, you need to create another media query for small screens in your css that transforms your table cells into block elements:
@media only screen and (max-width: 760px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
}
For the second part, Bootstrap is a huge framework and will change everything. For projects where I need responsiveness without the bulk, I've been using Pure CSS, which gives a lot of the responsive goodies in a 4.4KB package.