Custom css (Blog + sidebar and footer overlap each other)

av_admin_1984

Hi

I need your help please.

I uesed this cod for blog post background and its so nice now

.has_content .the_content_wrapper {
box-shadow: 0 5px 30px rgb(70 72 77 / 8%);
padding: 40px;
background: #fff;
border-radius: 20px;
}

Now I want to add this to my sidebar widgets but when I add something like this , It ovelop the footer menu and html code and all boxex in there.

Unfortunetly I remove the footer widget and for now forget the sidebar , but I need to fix that.

You already have my website in your email many time , If you dont have , I shoulde sent it to you.

Phil

Hello,

Please send me a link to your website and a screenshot pointing to what you want to change please?

Unfortunately, I cannot find a link to your website.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Hello Phil,

Fine , I will send you via email.cheek your email in less than an hour

av_admin_1984

Now you have the links

I want the each widget in side bar use this code:

box-shadow: 0 5px 30px rgb(70 72 77 / 8%);
padding: 40px;
background: #fff;
border-radius: 20px;

And dont affact on the footer .

One more thing , please cheek that page with mobile , it have issue

Thanks

Phil

Please, try the following code:

.mcb-sidebar .widget{
    box-shadow: 0 5px 30px rgb(70 72 77 / 8%);
   padding: 10px;
   background: #fff;
   border-radius: 20px;
}

I only reduced the padding because it broke the display a little, but you will do with it what you want 😁.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Thank you dear Phil

Thats fine now

I really want to see the Table of content in betheme

Phil

Did you vote for this feature in our survey?

https://muffingroup.com/betheme/feature-voting/

If not, please, do that because, thanks to that, we know what the most desired feature in future updates is. 😉

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Yes I vote for that.

New questin

In sidebar I have html section and in it have a href tag , we have exclusive font that have variation , I want to add this code to widget a tags for that specific page

.vf-shar {
    font-variation-settings: "wght" 700, "dots" 8}

but I got error , would you please tell me how add that to a tag or p tag inline css?

All my css work just this one is not working.

Phil

If you want to apply the code for that specific page at the beginning of the code, you can put the post id class.

It should look like this:

.postid-47491 .mcb-sidebar a{
  font-variation-settings: "wght" 700, "dots" 8!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Hi

I have stil problem in blog post on mobile devices , I have many css code and now I don't know witch one cuse that :

css.txt

Would you please cheek and tell me ?

Thanks🙂🤗

Phil

Can you describe in more detail what the problem is, please?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Yes ,

the mobile user can not read all the content becuse some part of content is out of the page

This theme I'm using just have some snipets in function.php and this is the latest update so there is no problem with theme . I think it's beucse of my css that I can't find that.

Phil

It is because of the padding you are using for the elements.

You should use media queries, and set a lower value for mobile display.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Would you please give me the output code? I'v never worked with media queries ☹️

Phil

It should look like this:

@media only screen and (max-width: 767px) {
 .has_content .the_content_wrapper{
  padding: 10px!important;
 }
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

av_admin_1984

Excellent 😍😘🤩🤗

Tank you