Responsive media query customization for Blogger template
Use the default Blogger template called Simple. This is because I can change the template. But responsive design is bad. Only on a mobile small screen can text be easily readable. I tried adding media queries but I'm not sure about the CSS. Below you have the code that I tried to apply but with no success.
EDIT:
We've managed to add some code that works really well. I need your help to improve the code already posted by me, but also add a sidebar to customize or not display.
For the sidebar, the class was fauxcolumn.
My template template is here: http://hostcode.sourceforge.net/view/3075
/**************************************************************************/
/*********************RESPONSIVE MEDIA-QUERIES*****************************/
/**************************************************************************/
/* Laptops and Desktops */
@media (min-width : 1025px) and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
}
/* Tablets (Landscape) */
@media (min-width : 769px) and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -25% !important;
width: auto;
text-align: left;
padding-right: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 0px !important;
width: 75%;
text-align: left;
padding-left: 0px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
}
/* Tablets (Portrait) */
@media (min-width : 641px) and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -35% !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 25px !important;
width: 60%;
text-align: left;
padding-left: 0px;
}
}
/* iPhones */
@media (min-width : 481px) and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
body {
position: relative;
aling:center;
margin: 0 0px 0 -300px !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 200px 0 0px !important;
width: 55%;
text-align: left;
padding-left: 0px;
}
}
/* Mobiles */
@media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
}
/**************************************************************************/
/*****************************END RESPONSIVE*******************************/
/**************************************************************************/
Thanks for the help!
source to share
Blogger has a responsive template called "Contempo" which already has media queries. You might want to try. I use it on my travel blog. SEO is broken (as with most blogger templates) but I fixed these issues and you can get the fixes from my GitHub (sorry no links, you have to dig them yourself out like some "experts" here edit posts removing all links) ...
source to share