I have made my own blog using Affiliation theme of sora templates but I have found an issue of having no option to increase the width of the blog. I can share the code when I edit it does not work. how can I adjust it? the code was in the CDATA I think it is used to not edit the code but I have also removed it and the same issue occurs. Anybody can help me with this? please
<b:template-skin>
/------Body layout----------/
body#layout #outer-wrapper,body#layout .row{width:Auto;padding:0}body#layout{width:1200px;position:relative;padding:95px 5px 0;margin:0 }body#layout div.section{margin:0 5px 10px!important;padding:16px 16px 18px!important }body#layout #brand-services-wrap {display: block;padding: 0;}body#layout .section h4{font-size:14px;margin:0 }body#layout .email-folower {padding: 0;}body#layout .layout-widget-description{display:none }body#layout .theme-options,body#layout #main-menu .widget{display:block!important }body#layout div.sora-panel{background-color:#d7d7d7!important;overflow:hidden!important;border-color:#bcbcbc }body#layout #intro-author .widget-content {height: 224px;}body#layout #header-wrap{height:auto }body#layout .header-header{padding:0 }body#layout div.header-logo{float:none;width:auto;height:auto;max-width:none }body#layout .mobile-menu{display:none }body#layout #header-wrap .container{display:flex }body#layout #header-logo,body#layout #main-menu{width:50%;height:auto }body#layout #intro-wrap,body#layout #intro-author-wrap,body#layout #intro-services-wrap,body#layout #testimonial-wrap,body#layout #contact-area{display:block;padding:0;margin:0 }body#layout #intro-wrap,body#layout #main-intro{float:none;width:auto;height:auto }body#layout #main-intro .widget{height:auto;overflow:visible }body#layout #intro-author-photo{display:none }body#layout #intro-author{width:auto }body#layout #content-wrapper{margin:0 }body#layout #content-wrapper > .container{margin:0 }body#layout .head-text,body#layout #testimonial{float:none;width:auto;back
}body#layout #main-wrapper{width:65%;padding: 0;margin: 0;float: left;}body#layout #contact-area .container{display:flex }body#layout #contact-area .section{width:50% }body#layout .contact-col .Text .widget-content{margin:0 }body#layout #sidebar-wrapper{display: block;width: 96%;padding: 0;}body#layout .sidebar .widget,body#layout .sidebar .widget-content{float:none;overflow:visible;width:auto;}body#layout .top-bar-nav, body#layout .top-bar-social {width: 44.5;}body#layout #top-bar {height: auto;}body#layout .author-intro-widgets .author-list {width: 26.386%;}body#layout #footer-copyright{padding:0 }
</b:template-skin>
I have unminified your CSS @irshadmuhammad844. No one can work with a minified version. Hopefully this will help figure what’s going on.
I notice you have an invalid specification near the end width: 44.5; 44.5 what?
<b:template-skin>/------Body layout----------/ body#layout #outer-wrapper,
body#layout .row {
width: Auto;
padding: 0
}
body#layout {
width: 1200px;
position: relative;
padding: 95px 5px 0;
margin: 0
}
body#layout div.section {
margin: 0 5px 10px !important;
padding: 16px 16px 18px !important
}
body#layout #brand-services-wrap {
display: block;
padding: 0;
}
body#layout .section h4 {
font-size: 14px;
margin: 0
}
body#layout .email-folower {
padding: 0;
}
body#layout .layout-widget-description {
display: none
}
body#layout .theme-options,
body#layout #main-menu .widget {
display: block !important
}
body#layout div.sora-panel {
background-color: #d7d7d7 !important;
overflow: hidden !important;
border-color: #bcbcbc
}
body#layout #intro-author .widget-content {
height: 224px;
}
body#layout #header-wrap {
height: auto
}
body#layout .header-header {
padding: 0
}
body#layout div.header-logo {
float: none;
width: auto;
height: auto;
max-width: none
}
body#layout .mobile-menu {
display: none
}
body#layout #header-wrap .container {
display: flex
}
body#layout #header-logo,
body#layout #main-menu {
width: 50%;
height: auto
}
body#layout #intro-wrap,
body#layout #intro-author-wrap,
body#layout #intro-services-wrap,
body#layout #testimonial-wrap,
body#layout #contact-area {
display: block;
padding: 0;
margin: 0
}
body#layout #intro-wrap,
body#layout #main-intro {
float: none;
width: auto;
height: auto
}
body#layout #main-intro .widget {
height: auto;
overflow: visible
}
body#layout #intro-author-photo {
display: none
}
body#layout #intro-author {
width: auto
}
body#layout #content-wrapper {
margin: 0
}
body#layout #content-wrapper>.container {
margin: 0
}
body#layout .head-text,
body#layout #testimonial {
float: none;
width: auto;
back
}
body#layout #main-wrapper {
width: 65%;
padding: 0;
margin: 0;
float: left;
}
body#layout #contact-area .container {
display: flex
}
body#layout #contact-area .section {
width: 50%
}
body#layout .contact-col .Text .widget-content {
margin: 0
}
body#layout #sidebar-wrapper {
display: block;
width: 96%;
padding: 0;
}
body#layout .sidebar .widget,
body#layout .sidebar .widget-content {
float: none;
overflow: visible;
width: auto;
}
body#layout .top-bar-nav,
body#layout .top-bar-social {
width: 44.5;
}
body#layout #top-bar {
height: auto;
}
body#layout .author-intro-widgets .author-list {
width: 26.386%;
}
body#layout #footer-copyright {
padding: 0
}
</b:template-skin>
I do not know i have customized the template please if you can then make this code correct for me so i can use it
It would help if you also posted the html.
Please press Ctrl+U in your browser and post the body part so we can see what structure the css is styling.
Maybe we could need to see the css content from that source too, but first the actual body-html.
/------Body layout----------/
body#layout #outer-wrapper,body#layout .row{width:Auto;padding:0}body#layout{width:1200px;position:relative;padding:95px 5px 0;margin:0 }body#layout div.section{margin:0 5px 10px!important;padding:16px 16px 18px!important }body#layout #brand-services-wrap {display: block;padding: 0;}body#layout .section h4{font-size:14px;margin:0 }body#layout .email-folower {padding: 0;}body#layout .layout-widget-description{display:none }body#layout .theme-options,body#layout #main-menu .widget{display:block!important }body#layout div.sora-panel{background-color:#d7d7d7!important;overflow:hidden!important;border-color:#bcbcbc }body#layout #intro-author .widget-content {height: 224px;}body#layout #header-wrap{height:auto }body#layout .header-header{padding:0 }body#layout div.header-logo{float:none;width:auto;height:auto;max-width:none }body#layout .mobile-menu{display:none }body#layout #header-wrap .container{display:flex }body#layout #header-logo,body#layout #main-menu{width:50%;height:auto }body#layout #intro-wrap,body#layout #intro-author-wrap,body#layout #intro-services-wrap,body#layout #testimonial-wrap,body#layout #contact-area{display:block;padding:0;margin:0 }body#layout #intro-wrap,body#layout #main-intro{float:none;width:auto;height:auto }body#layout #main-intro .widget{height:auto;overflow:visible }body#layout #intro-author-photo{display:none }body#layout #intro-author{width:auto }body#layout #content-wrapper{margin:0 }body#layout #content-wrapper > .container{margin:0 }body#layout .head-text,body#layout #testimonial{float:none;width:auto;back
}body#layout #main-wrapper{width:65%;padding: 0;margin: 0;float: left;}body#layout #contact-area .container{display:flex }body#layout #contact-area .section{width:50% }body#layout .contact-col .Text .widget-content{margin:0 }body#layout #sidebar-wrapper{display: block;width: 96%;padding: 0;}body#layout .sidebar .widget,body#layout .sidebar .widget-content{float:none;overflow:visible;width:auto;}body#layout .top-bar-nav, body#layout .top-bar-social {width: 44.5;}body#layout #top-bar {height: auto;}body#layout .author-intro-widgets .author-list {width: 26.386%;}body#layout #footer-copyright{padding:0 }
</b:template-skin>
Please look at it and help me
That’s the CSS which you posted already.
We need to see the HTML to which that CSS relates.
It would also help if you identified what parts you actually changed.
I have changed the color and made some new pages in the blog and nothing more i have changed if you download the sora affiliation template there you will find the whole code it would only take 2 mints to download please do it for me. because i am not understanding the code not expert
@irshadmuhammad844. Open your web page in the browser and copy the body part of the source that opens in a new window when you press Ctrl+U while on that page.
I don’t understand if you can do it then do it please
If you can open the web site in your browser, then you can do it.
Anybody and I could do it if we visit your web site, so you can too. 
if you can do something with the code i provide please make it correct
That would be only guessing, I’m afraid. You have not yet given the code we need to see to do that!
How can you know that the width needs to be wider if you can’t open the page in your browser?
Please tell if you only have a mobile and no desktop pc to check the page in?
1 Like
Is this what you are using?
https://affiliation-sora-templates.blogspot.com/
The CSS in that demo does not match the code you have posted above.
The theme seems to be responsive, so I’m not sure what you mean by
Can you explain what you want to increase, or post a screenshot?
1 Like
Yes, I am using that template which you have mentioned and i want to increase the width size of the whole blog because if you can see the template the sidebar and everything in it is on the middle and the space to right and left side exist and i want to remove that space to make it looks better but there is no option in the customize theme, In some of themes we get option of adjust widths but here i have no option and also in html code i have tried more but when i change the width size and save then it do not effect the template.
https://devigntechkohat.blogspot.com/
search that blog i want to remove the space from left and right sides
I checked the html source of the index page and before suggesting a solution I have to know if you’re able to edit the source of each page or if you handle the site by an admin panel.
The code you posted so far does not seem to be used at all so where does it come from?
So, what options do you have to make the necessary (simple) change?
If you view the html source as I described earlier and search for .row you will find it in two places.
The first occurrence is the default width that you want to change: .row{width:1000px }. If the 1000px were changed to auto you would get a page width that expands to viewport width.
The embedded CSS you have in each web page is not what is standard coding. So until you know how the pages are assembled, each of its own source or from a template there is no right answer how to make the pages auto width.
I can’t really suggest any best way to make the width auto for the whole site.