[Resolved] ::before == $0 left side container

[Emir]

Hello, can you please help me to move or remove this box because it doesn’t allow me to have the full-width picture. I can stretch it but only to right side with elementor , and I inspected to see what is on left side and find that::before == $0 container or whatever it is.
I was remove heading picture with CSS I found here on the forum because I don’t wanna remove picture and header with removal element tool.I have added padding for sidebar widgets, to push them down, so I could have space for my own custom heading picture and text stretched.
Here is link: https://thesmarthomeproducts.com/test/ and https://thesmarthomeproducts.com/about-me/
I am trying to set the foundation to page with my custom look and then add content.
And I can actually additionally reduce the gap between my heading pic and nav bar with padding like this https://thesmarthomeproducts.com/test1/ but can not stretch the picture to the left because something and don’t wanna use full with because I will add advertisements on both side later.If there is the better way to reduce this gap except manually padding every picture in elementor I would appreciate any help.
Thank you in advance for the help.
Regards,
Emir

[Leo]

Hi there,

I can’t get the pages to load. Can you please double check?

[Emir]

Hi, sorry page was down for about half hour.Don’t know why, first time its happened since I make it.
Can you try to check it now or when you have time today?
Regards,
Emir

[Leo]

Not sure what you mean? What boxes?

You have a lot of widget padding set: https://docs.generatepress.com/article/widget-padding/

Looks like you can use the page header add-on? https://docs.generatepress.com/article/page-header-overview/

[Emir]

I made my custom header and remove, post heading or post feature picture that showing automatically, with CSS I found here on the blog.
Then I am add padding for sidebar widgets to lower them position so I can add my own picture under the menu in full width.But as you can see its stretched to the right correctly but it is broken on the left side by something and that is not sidebar widget.Can you help to move or remove that, whatever is split or cut the left side of the picture, mean from middle content side to left full stretch across left widget sidebar, so I can have the fully stretched picture under the main menu?
Thanks again.

[Emir]

#search.widget.widget_search
.widget-area .widget
.sidebar .widget
.widget
aside

font-size: 17px
padding: 40px
margin: 0 0 30px
display: block

when change visibility to hidden I have the full stretched picture.
#search.widget.widget_search {
visibility: hidden;
}
So can I make some mess with this CSS change or something because I’m new in this?
Sorry for bothering but I really wanna make this how i want.
Abd I have the gap between menu and picture only in the post and im hide admin and date, do you have an idea how can I reduce this gap to 0 px like on pages.I’m reduced container top padding to 0.
Thanks a lot, in advance and sorry for bothering you again.
Cheers

[Leo]

Have you tried the Page Header add-on as suggested above?

What you are trying to do is definitely not a good way and you are basically creating a full width page header which is what the add-on is for.

[Emir]

Thanks for the help, really appreciate. I will try with page header, but I will need to make the header for every post.Because of that, I was trying to make it with elementor, its easier for me.Hope this is not harming the site, I use just 4 CSS and I don’t have the intention to use more of them, because I don’t like it, and I don’t have enough knowledge to us it properly.Can I paste this commands I used in generate press additional CSS note and remove custom CSS plugin, mean if this codes below safe to use? Really sorry for bothering you again, but I don’t have anyone else to ask.
Here is what I use:
.entry-date.published {
visibility: hidden;
}

.author.vcard {
visibility: hidden;
}

.posted-on .updated {
display: block;
visibility: hidden;
}

.page-header-image-single {
display: none;
}

#search.widget.widget_search {
visibility: hidden;
}
Best Regards,
Emir

[Leo]

You shouldn’t have to do that. GP’s new page header feature allows you to apply the same style header but with different content or image for each posts.

It will also take Elementor shortcode if that’s what you prefer.

As for your code, it’s just CSS so it definitely won’t hurt the website so it should be ok as long as you are happy with it.

[Emir]

Thanks Leo for help, really appreciate.
Best Regards,
Emir

[Leo]

No problem!

[Author]

Posts