[mailhunter]

Hi,

I’m using the Catch Box Theme with my personal child theme. I would update to the actual version. But I have a problem.

I added a CSS class in the menu (no-mobile-menu-item)

In the CSS I added:
.no-mobile-menu-item {display:none;}

In the normal desktop menu the links are not shown (correctly) if I add .no-mobile-menu-item {display:none;} for the desktop version. But in the responsive menu they are shown. I don’t know why. I should not be shown (display:none). I just tested this offline. So, I can’t send you link to show.

Perhaps it is also possible to create a second menu, just for mobile view.

I would be happy if you could give me hints to solve my problem.

Best Regards,
mailhunter

[Mahesh]

Hi @mailhunter,

I think you are trying to hide the item only in mobile view. If so, please use the following CSS:

@media screen and (max-width:961px){
    .no-mobile-menu-item {
        display:none !important;
    }
}

Let me know if this solves your issue.

Regards,
Mahesh

[mailhunter]

Hello,

thank you for your answer. To show the result, I published it. See: http://christus-gemeinde.net/cms/.

The problem I now have is, that the dark lines below the menu-item is bigger, if the following link is hidden.

See the links “Bildergalerien”, “Veranstaltungen” and Texte.

How can I fix this?

Regards,
mailhunter

[mailhunter]

Hello again:),

I’ve also seen, that large images are not centered correctly.

Before the Update, I had a white space left and right to the image. If I look at the smartphone now, I have white space left, but not on the right sight of the image. See for demonstration the tow image on the home page.

Regards,
mailhunter

[Mahesh]

Hi @mailhunter,

For removing large dark lines add following Custom CSS:

@media screen and (max-width: 960px) {
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-535 ul.sub-menu,
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-538 ul.sub-menu,
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-540 ul.sub-menu{
		border-top: none;
	}
}

For the second issue, image not centered, it is a bit complicated, @Sakin will answer this.

[Sakin]

@mailhunter: To make that header image center, you can add the following css:

.head-center {
    text-align: center;
}

[mailhunter]

@Saskin: My problem is not the header image.

My problem is, that the images on the pages – within in the content – are not correctly presented. Before the Update, I had a white space left and right to the image. If I look at the smartphone now, I have white space left, but not on the right sight of the image. See for demonstration the two images on the home page,
or – for not centered images – here: http://www.christus-gemeinde.net/cms/wir-uber-uns/

[Sakin]

@mailhunter: Ok then add the following css:

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img,
img.wp-post-image,
img.attachment-thumbnail{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}

[mailhunter]

Thank you. It works fine:).

A last question: If I have a viewport a bit bigger than the image, e.g here: http://www.christus-gemeinde.net/cms/wir-uber-uns/

the first text line below below the image flows right. This ends when I start with float:left/right in the desktop view. Is it possible to start with complete text lines under the images?

[Sakin]

@mailhunter: Add the following css:

@media screen and (max-width: 767px) {	
    .alignleft {
        float: left;
        margin-right: 2em;
    }
    .alignright {
        float: right;
        margin-left: 2em;
    }
}

[mailhunter]

@Saskin: Thank you for the help. I wish you a happy new year.

[Sakin]

@mailhunter: Wish you too Happy New Year… By the way, my name is Sakin and my user handle is @sakinshrestha 🙂

[mailhunter]

@sakinshrestha: Sorry about the wrong name, Sakin! Now, I checked it:-).

[Author]

Posts