The width of my home page does not match the width of the posts page!

Hello, I purchased your theme two days ago and I have a question.

The width of my home page does not match the width of the posts page and other pages.

It doesn’t match by about 20 pixels on the left and right sides.

I’m talking about the header, the footer, and the body of the page.

I tried Force Full Width for Header, Header menu dnd Footer but to no avail.

The only success I had was with the Page Tamplete> PAGE LAYOUT SIZE> Full Witdh (with paddings).

I have exported from three different templates.

One template is for the home page, another template I use for the header and footer.

On the home page, everything matches exactly.

But when I make the blog post page, both the header and footer and body don’t match the width of the home page. I put everything at 100% width and still there is a difference in pixels.

Upon inspection, I see the same css code:

.td-pb-row [class*=”td-pb-span”] {
display: block;
min-height: 1px;
float: left;
padding-right: 24px;
padding-left: 24px;
position: relative;
}

but when i change the code with

padding-right: 0px;
padding-left: 0px;

The home page is full screen width, but the blog post page (the header, footer and body) has an extra 10 pixels on both sides – left and right.

I tried everything, but after two days of wandering, trial and error, I decided I needed help.

So what do I do to make all my pages look the same width?

Thanks in advance for your help!

.vc_row {
margin-left: -15px;
margin-right: -15px;
}

Ok!

I found a temporary solution!

.vc_row {
margin-left: -15px;
margin-right: -15px;
}

I did it on

.vc_row {
margin-left: -25px;
margin-right: -25px;
}

And I put this code in Custom CSS

But is this a bug or something else?

Why can’t the theme solve the problem without writing code?

Hi Anamaria,

I use different parts of your templates. Header is from one template, Footer is from another template, Categories page is from a third template. I no longer remember the names of the templates, and I have renamed them to make it easier for me to work. Then I changed these different parts with tagdiv Composer beyond recognition and they look nothing like the original.

The above css code will do the job. Hopefully this will be the last thing that gets in the way of my site design.

And one more question, on the home page of the site I have a menu on the left side that I want to hide in the mobile version of the site. I looked for an option in the theme for this functionality, but I didn’t find it, and I did it again with css code:

@media only screen and (max-width: 800px) {
body .tdi_42 {
display: none;
}

}

Does such functionality exist, and if so where?

Thanks for the reply and have a nice day!