Mimbo Pro Custom Header
-
I have the custom header feature for Mimbo Pro however when an images is place there of the appropriate size it does not behave in a responsive manner.
The blog I need help with is: (visible only to logged in users)
-
Please consult:
https://en.support.wordpress.com/themes/custom-header-image/
https://theme.wordpress.com/themes/mimbopro/
https://theme.wordpress.com/themes/mimbopro/support/
Note: Need extra help? Visit the Mimbo Pro support forum.
http://premium-themes.forums.wordpress.com/forum/mimbopro -
TimeThief,
Thank you I have consulted with the referenced links. In the area of click to see at the bottom of the page for those themes that support custom headers (http://support.wordpress.com/themes/custom-header-image/#supported-themes) the theme Mimbo Pro is not in the gallery of themes presented. The theme in use on my side is not behaving responsive in large part the only changes are to the menu and some minor changes to the image in the featured story.
I don’t understand why. I have removed all custom CSS and still no change in the site allowing to display in a responsive manner with the exception noted in this message.
-
I tagged this thread for Themes Staff assistance. Please subscribe to it so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
-
-
-
The Mimbo Pro theme uses the cover background property. When this property is used the image will be cropped to fit the max width of the area. This may result in full image not being shown.
In your case you could use the following CSS to change the header image just for the mobile breakpoint.
@media screen and (max-width: 600px) { #masthead { background-image: url("http://greatlakesjobfairdotcom.files.wordpress.com/2015/06/banner-black-grey-fade-with-black-embossed-text.png"); background-position: left center; background-repeat: no-repeat; background-size: contain; min-height: auto !important; } }As an aside, If you add the following to the media query above you can remove the horizontal scrollbar in the mobile view in the home page:
#home #content.column-0-1 { width: auto; }You’ll find more about Media Queries here:
https://css-tricks.com/css-media-queries/Moved to CSS Customization
-
bdukes, thank you for your prompt reply and code recommendations on how to handle the banner responsiveness issue. Could shed some light on the issue of this theme not displaying aside from the banner in a responsive manner.
When I check the demo on the theme on their page all is well with resizing my browser and or using the tools I use to test responsiveness at various view portal sizes.
However not the same with the Mimbo Pro in production. The top portion of the page is very narrow and the center section is too wide and the footer is showing a grey block in the bottom right.
I am using standard widgets, no custom html, I am have for the sake of testing removed all custom CSS.
I a puzzled why this is happening.
This site will have literally thousands of page view in the coming month of July and August. Its an even site for a Job Fair attended by thousands of people. I need to get this site to be viewable on a mobile device otherwise it’s impact is significantly diminished.I have labored many, many hour on behalf of my client to get this working. In the .org environment I would have other testing at my disposal, deactivating plugins, checking media queries, without have to use inspection of elements as my only tool.
I am not able to install the Mimbo Pro on another site associated with this account as a test either I assume? I can’t change themes without fear of loosing content? again no slight to the .com world I just don’t have the troubleshooting approaches I would have if I had control over the theme.
Please help me! of direct me to mimbo pro support contacts who can help.
Sincerely,
Mario Cipriano
TeamInternetSolutions.com -
Well, I have figured it out!!! The theme will only behave in a sponsive manner when displaying the home page IF IF IF you place at least ONE widget on the left side of the page. No left side widget it goes wacko!
-
When I check the demo on the theme on their page all is well with resizing my browser…
It appears that the theme, Mimbo Pro has one responsive breakpoint at around 600px. I am not able to get the demo, a test site, or your site to behave in a responsive manner at any other breakpoint.
I am not able to install the Mimbo Pro on another site associated with this account as a test either I assume?
You are welcome to create a test site with either the 14 day trial of our Business Plan (which gives you access to all themes) or to buy the theme for a test site and import your content over.
I can’t change themes without fear of loosing content?
When you change your theme all your content (posts and pages) are saved. The theme options, (widgets, menus, custom css) are also saved. This allows you to easily switch between themes. One thing to note is only the last 50 CSS revisions regardless of themes are saved and your widgets may go to the inactive widget area.
I also wanted to let you know that Mimbo Pro has its own Premium Theme forum where you can get help directly from the theme developers at:
https://premium-themes.forums.wordpress.com/forum/mimbopro -
bdukes you are awesome!
I have been over the premium forum but very little activity there… I did figure out that for some reason unless I place a widget on the left side of the home page the posts in the center of the page go unresponsive.
I also see that now that I have the responsive working that the footer information and all sidebars are not included in the media query (I assume) so don’t display. This leaves me without an option to show social media icons using any widgets.
Next I am going to try your suggested media query CSS code in the Customizer CSS area to work on swapping out the header image. I am also going to try to swap out the feature image attached to the post at the top of the site since when in responsive mode that image is very pixilated. Actually any image I place there is pixelated. I think I need a smaller version at the breakpoint.
Not sure how to get the social media icons in a responsive view yet…
-
@dukes I have the media query working with the background image however there is another that is not a background Image in this case its the feature image for the featured post on the home page. It’s very small so when the site goes responsive it pixelates the heck out of that image because it’s set to display about twice the size.
I have read that if I set an the div id to something new then I could differentiate between the image I don’t want display none; and use the image sized the way I needed it for display: block; but to do this I would need access to the html… can’t w to do this here on the .com :)
The solution would have to be 100 CSS any ideas?
Thanks!
-
I have reported that the featured image is not correctly displaying at the mobile breakpoint to the developers to take a look.
For now there are a couple of options:
1) You can make the image smaller at the mobile breakpoint by adding something like this to your media query:#lead img, #interior #lead img { width: 60%; /* This was originally 90% */ }2) You could hide the image completely with this in your media query
#lead img, #interior #lead img { display:none; }3) Depending how often you are creating a new featured post, you can edit the image used in the featured post to set the background image to a larger image. It looks like you already started to do this:
#lead img, #interior #lead img { visibility: hidden; } #lead .left { background: rgba(0, 0, 0, 0) url("https://greatlakesjobfairdotcom.files.wordpress.com/2015/06/415wide.png") repeat scroll 0 0 !important; height: 200px; width: 400px; }4) Do nothing and wait for the theme authors to take a look, unfortunately there is no timeline for this.
-
Hi @bdukes,
I have successfully used CSS to swap the header image for the viewport and also for the featured image. The header image is a background image and my CSS works fine for the swap at 600px.
The featured image displayed by the theme at the 600px break is resized from an already theme created image of 200×180.
I was able to to use CSS to swap out this non background image however the CSS is not working in anything bu Chrome.
I have sought and am seeking assistance with the correct CSS.
I had not however tried the code you just provide of
#lead img, #interior #lead img {
visibility: hidden;So maybe this will be cross browser compatible.
The Author made a change to the theme to show the footer widgets as at 600px it had shown none. Unfortunately the change is not responsive so the footer items (Logos) are huge and I will need to make CSS entries to resize or swap those as well. Or maybe he/she will make another change to make them responsive.
Thank you once again for your prompt and helpful reply!
-Mario
-
@bduks You ROCK! I was missing the .left and also using display: none; NOT visibility: hidden; these were key to cross browser fix. I had taken the approach of swapping the image without treating it as a background image but a foreground image. Your treatment as background was also key to cross browser resolution.
Now to the footer!
-
It looks like you got your footer to be responsive, good job.
For future reference, the difference between display:none and visibility:hidden is that display none removes the element from the page (including any space it was using) where visibility hidden just hides the element leaving the space.
-
I do have one small suggestion. It looks like currently the replacement background image is set to repeat. This causes the image to double up at one point: https://cloudup.com/iiUOkkeobKe
If you add
background-repeat:no-repeat;to the #lead .left it will prevent the background from repeating and doubling up. -
Thank you for catching that!
I made the change. Yes the footer was lit up if you will by the author who said is was responsive but it really wasn’t so I made it so…
In the end way too much custom CSS for this theme, but I am very grateful for your help!
Thank you for the note on visible vs hidden good to know!
-EMC
-
- The topic ‘Mimbo Pro Custom Header’ is closed to new replies.
WordPress.com Forums 