[catwingz]

She likes the large banner on the home page and still wants to have a banner on the other pages. The idea of having it be smaller on the other pages is my thought for a compromise.

[catwingz]

But will that leave the home page with the larger image? She doesn’t want it to change.

Thank you

[catwingz]

Hi,
What she is really trying to achieve is to make the content more immediately viewable. How about making it so that the banner on all except the home page is shorter? Making it a narrower strip on those pages should accomplish this.
Thank you

[catwingz]

If there is a secure way to do so, I would be happy to give you a login to the development site. That’s the only way I can think of for you to see the code in action.

[catwingz]

The url for the public site is here. It has the full sized logo. It has a plugin enabled which redirects it to the separate mobile site we want to retire. Unfortunately the only way to see the development site with the code being discussed here is to be logged into the site.

[catwingz]

@Pratik, it appears there is a need for an in between step of some kind. I am surprised others don’t have this problem. Phone-sized works with the last bit of code. it looks like this

The problem is with tablet-sized or if no extra code is added. where the desktop logo is completely squashed With no extra code it is this way for both tablet and phone sizes. 🙁

Suggestions?

Thank you—I really appreciate the awesome support you guys offer.

[catwingz]

@Mahesh, this isn’t quite the solution I am shooting for. Using this code makes the logo intended for mobile the right size on phones, but also visible on much larger screens than intended. The regular desktop logo is fine on tablets, so the logo only needs to change on phones. However, if I change the max-width back to even 767, the desktop logo distorts vertically. I am also finding that when the new mobile logo is viewed on a phone it is pushed off to the left. This has led me to experiment with a miniaturized version of the desktop one to make use of the extra space on the right.

Up until now we have been using a separate mobile site which uses the smaller vertical logo, displaying it centered on the screen with the text (in the image) beneath the circle. That would be the ideal outcome, but at least getting it so that it only shows on phones would be something I can work with.

Thank you

[catwingz]

Hi,
When it turned out badly I tried changing the height. This produced the same failed results. This is the latest version:

@media screen and (max-width: 767px) {
    #site-logo .custom-logo-link {
        display: none;
    }

    #site-logo {
        background-image: url('http://integrationmassage.com/shadowsite/wp-content/uploads/2017/02/circle-logo-129w.png');
        height: 152px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

I am working this out on a development site that you can’t see unless you are logged in, so I have created a set of screenshots. At this point I don’t know what (or if) the best size might be for the logo. We’ve been using a separate mobile site and I am hoping to instead switch to taking advantage of the full responsive range of your theme. This problem with the logo is the only roadblock.

This is what the mobile logo should look like
the way it looks with the new code
stretching as screen enlarges – possibly tablet
stretched desktop logo
the full logo on the desktop site

Thank you

[catwingz]

Thanks @Mahesh, that is a huge help. Up until now she hasn’t needed a child theme, but this will make her very happy.

[catwingz]

As I said, this is a problem with the editing area for posts and pages in the admin, not with the public site. The following are links showing the difference between what the preview of a post looks like in comparison with the view in the editing window. The wide right margin is causing problems with her ability to format posts.

This happened when we made the main content area wider.

Thank you

[catwingz]

Integration Massage

[catwingz]

This is a second attempt. For some reason my posts keep disapearing.

[catwingz]

Site Url

[catwingz]

This is really weird. I posted a follow-up question several weeks ago and now it is gone…
So the public view of the website is much improved, but the view in the post and page editor now has a wide margin on the right side. This is causing problems for my client when she is trying to format her posts and place images, etc. What can be done to remove this and catch the editing experience up with the actual site?
thank you

[catwingz]

This is great! I hope this will be exactly what she wanted. Thank you

[catwingz]

It turned out to be a very simple solution.

.wp-caption {
background: #ffffff;
}

[catwingz]

The second of the two images of the brain has a caption. This is what she wants to be all white. Thanks

[catwingz]

Mahesh, thanks, but that doesn’t appear to change anything. This is the background for images with captions. I would like to either remove it or change it to white.

[catwingz]

Hi, I am back to this project, and we are half-way there. The hyphens are gone, but now the background color for the images has to go. I tried changing the code from the last post to #ffffff, but it has no effect. What am I missing?

thank you

[catwingz]

!!! Integration Massage
Hopefully this time it will work!

[Author]

Posts