Mobile view background image

viewsmarketing · February 2022

Hello,

I have added a background image in the muffinoptions > global settings.

This is displayed in the mobile view on the home page completely different from all other pages. I have set the size to cover. But it is not fully displayed on mobile on any page.

What can I do?

Best regards

Natalie

Phil · February 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

It is always a good idea to also attach a screenshot showing your issue.

Thanks

viewsmarketing · February 2022

Hi Phil,

Thank you very much for your answer. The page has password protection because it is not yet finished. I would like to send it to you by DM if possible and not post it here in the forum.

However, I have attached 2 screenshots which show the problem.

Maybe you have an idea which setting I can change.

Many thanks & best regards

Natalie

Phil · February 2022

Please send us login credentials privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!

Please attach a link to this forum discussion.

Thanks

Phil · February 2022

I can see that this part is placed there in the builder.

Please, edit it, open the mobile display, and adjust the display there.

Thanks

viewsmarketing · February 2022

Hi Phil,

yes I can do that - thank you very much.

But I also don't like the fact that the background image extends into the menu - see attached. Can I move it for the mobile view?

Best regards

Natalie

Phil · February 2022

Please, go to Betheme -> Theme options -> Responsive -> Header, and set the Header height to a value that will suit your website.

Thanks

viewsmarketing · February 2022

Hi Phil,

Thank you very much for your help. Unfortunately, changing the header height only moves the content down and not the background image.

Do you have any other ideas?

Best regards

Natalie

Phil · February 2022

You can add some transparent space at the top of your background image in some graphic tool and replace the current one.

You can also add some margin at the top of your website, but it would require writing a custom CSS code, and the first option is a simpler one.

Best regards

viewsmarketing · February 2022

Great idea Phil! That worked out wonderfully. Thank you very much.

Now I have another question. I have already searched everywhere for a solution, but unfortunately have not found an answer.

I use the Be Blog homepage to preview my posts. I have selected Masonry Tiles as the style. How do I get rid of the dark overlay over the pictures?

Best regards Natalie

Phil · February 2022

Can you attach a screenshot showing what you are referring to, please?

Thanks

viewsmarketing · February 2022

of course very much

Phil · February 2022

Please, put the following code in Betheme -> Theme options -> Custom CSS & JS -> CSS.

.blog_wrapper .post-item .post-desc{
   background: none!important;
}

Thanks

viewsmarketing · February 2022

That works great! Thanks a lot for your help!

Phil · February 2022

You are welcome.

If I can help you with anything else, please, let me know.

Thanks

viewsmarketing · February 2022

Hi Phil,

I have another question: how can I make the font smaller at this point in the mobile font?

Best regards Natalie

Phil · February 2022

Please, use the following CSS code:

@media only screen and (max-width: 767px){
   .blog_wrapper .post h2{
    font-size: 35px!important;
 }
}

Thanks

viewsmarketing · February 2022

This works wonderfully! Many thanks for the quick help!

viewsmarketing · March 2022

Hello Phil,

I have 2 more questions. I have been searching for a while, but unfortunately have not found an answer.

I have my menu on the left side of the page. I would like that when hovering, the respective menu item gets a coloured underline....

And then I would like the underline in the blog overview to be coloured when hovering.

Can you help me please.

Kind regards

Natalie

Phil · March 2022

For the menu items put the following code in theme options:

#menu .menu-item:hover{
 border-bottom: 1px #fff solid;
}

And for the blog overview this one:

.masonry.tiles .post-item .post-desc-wrapper .post-desc .post-title::after{
   background: #621379!important;
}

Thanks

viewsmarketing · March 2022

Wow thank you so much! That works. can I also make the underscore in the menu shorter?

Phil · March 2022

Please, replace the code with the following one:

#menu .menu-item:hover span:after{
 content: "";
 display: block;
 background: #FF6253;
 height: 2px;
 width: 60%;
 left: 20%;
 position: relative;
}

Thanks

viewsmarketing · March 2022

Great! Thank you very much!

Mobile view background image

Comments