Use default Blogger template, named Simple. That because let me edit more template. But responsive design is poor. Only on mobile small screen the text can be readable easy. I tried to add media-queries, but I'm not experience in CSS. Below you have code that I tried apply, but unsuccessfully.
使用名为Simple的默认Blogger模板。那是因为让我编辑更多模板。但响应式设计很差。只有在移动小屏幕上，文字才能轻松阅读。我试图添加媒体查询，但我没有CSS经验。下面是您尝试应用的代码，但未成功。
EDIT:
编辑：
We have succeeded add some code that works pretty well. I need your help to improve code already published by me, but also to add sidebar to adjust or may not display.
我们成功地添加了一些非常好的代码。我需要您的帮助来改进我已经发布的代码，还需要添加侧边栏来调整或不显示。
For sidebar, class was that: fauxcolumn.
对于侧边栏，课程是：fauxcolumn。
My template code is here: http://hostcode.sourceforge.net/view/3075
我的模板代码在这里：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 a lot for any help!
非常感谢您的帮助！
1 个解决方案
#1
0
Blogger has a responsive template called "Contempo" which has media queries already in place. You might want to give it a try. I am using it in my travel blog. The SEO is broken (like in most of the blogger templates), but I fixed those issues as well and you can get the fixes from my GitHub (sorry, no links, you have to dig them out by yourself as some "experts" here are editing posts removing all links).
Blogger有一个名为“Contempo”的响应式模板，其中已有媒体查询。你可能想尝试一下。我在旅行博客中使用它。搜索引擎优化被打破（就像在大多数博客模板中一样），但我也解决了这些问题，你可以从我的GitHub获得修复（对不起，没有链接，你必须自己挖掘它们作为一些“专家”在这里正在编辑删除所有链接的帖子）。
#1
0
Blogger has a responsive template called "Contempo" which has media queries already in place. You might want to give it a try. I am using it in my travel blog. The SEO is broken (like in most of the blogger templates), but I fixed those issues as well and you can get the fixes from my GitHub (sorry, no links, you have to dig them out by yourself as some "experts" here are editing posts removing all links).
Blogger有一个名为“Contempo”的响应式模板，其中已有媒体查询。你可能想尝试一下。我在旅行博客中使用它。搜索引擎优化被打破（就像在大多数博客模板中一样），但我也解决了这些问题，你可以从我的GitHub获得修复（对不起，没有链接，你必须自己挖掘它们作为一些“专家”在这里正在编辑删除所有链接的帖子）。