First is to remove the borders on all images
(copy html-css code below).post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
#blog-pager {
display:none;
}?
remove home
#blog-pager {
display:none;
}
-----------------------------------------------------------
Second is to remove attribution blogger name at bottom of all the pages
(copy this html-css code below)
<style>
#Attribution1 {
display: none;
}
</style>
-----------------------------------------------------------
Third is to Replace the meta content by this under:
(copy the html-css code below)
<meta content='width=device-width, initial-scale=1.0,minimu-
scale=1.0,maximum-scale=1.0' name='viewport' />
-----------------------------------------------------------
Fourth - Creating images of posts be responsive.
a)Please find the below code (CTRL+F)
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
b). Then please replace the above code with the code below:
(copy the html-css code below)
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
-----------------------------------------------------------
Fifth- Find code below (CTRL+F):
</head>
The last step, place the following code above the </head>
(copy the html-css code below)
<style type='text/css'>
@media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer,
.region-inner {
width: 100%!important;min-width:100%!important;padding:0!important}
header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;margin-right: 0!important;}
}
</style>
-----------------------------------------------------------
-->and click save<--
-----------------------------------------------------------
For YouTube Video --> to make them responsive!
(copy html code below)
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><br />
<div class="embed-container">
<center>
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/mK5iYJLo4Rk?rel==0&autoplay=1;controls=0&showinfo=0"></iframe></center>
</div>
<br />
-----------------------------------------------------------