kertoon

Problem solved. Due to Viglink plugin.

Here is the link: https://lifelessonshome.com/

Let us know your site URL.

Have anyone create a child theme for this theme? Please share.

I found a tutorial over at: https://bloggerhelptips.blogspot.com/2015/04/how-to-reduce-spacing-between.html

OK Thank you for your tips and suggestions.

O.K. I will check with the theme creator. Thanks.

The problem has been fixed.

Can someone help me with the media queries. This is the custom code which has morphed it to have two equal sidebar and have narrower margins.

#main {
padding: 10px;
}
.main-wrap {
float: left;
margin-left: 1rem;
margin-right: 21rem;
}
#sidebar-primary-wrap {
float: left;
margin-left: 1rem;
margin-right: -21rem;
width: 20rem;
}

#sidebar-secondary-wrap {
float: left;
margin-right: -20rem;
position: relative;
width: 20rem;
}

When I tested it on the above mention tool, for 240×320 format, the main content and right sidebar is slightly too wide. For 320×480, the main content is slightly off. For 768x 1024, the margin is gone. The two border line merged together.

The problem is the creator of this theme doesn’t seem to entertain to most queries.

Genbu. By default it is well responsive. But I have it customized.

This is the default CSS code of sidebar.

.layout-content-sidebar1 .main-inner {
padding-left: 0;
width: 100%
}
.layout-sidebar1-content .main-inner {
padding-left: 0;
float: none;
width: 100%
}
.layout-sidebar1-content .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar1-content #content {
float: right
}
.layout-sidebar1-content #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}
.layout-sidebar2-content .main-wrap {
margin-right: 0
}
.layout-content-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-content-sidebar2 .main-wrap {
margin-right: 0
}
.layout-content-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar2-sidebar1-content .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar2-sidebar1-content #content {
float: right
}
.layout-sidebar2-sidebar1-content #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}
.layout-content-sidebar1-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-content-sidebar1-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar1-content-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-sidebar1-content-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar1-content-sidebar2 .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar1-content-sidebar2 #content {
float: right
}
.layout-sidebar1-content-sidebar2 #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}

The original left sidebar (sidebar 2) is wider. I have already have it customized. This is the code:

.main-wrap {
float: none;
margin-right: 20rem;
}

#sidebar-primary-wrap {
float: right;
margin-right: -18rem;
max-width: 100%;
width: 18rem;
}

Now what I like to have is to reduce the spacing between the sidebar and the main content to be narrower.

Now the left sidebar is way too wide until the fine boxed-up line of the sidebar merges with the boxed-up line the main content.

How do I reduce the gap between the sidebars and the main content?

o.k. Thank you.
How do I increase the width of both sidebars and reduce the spacing between the sidebar and the main content? Can you help me with the coding?