-
Posts
-
Hi,
On this website, mikesledge.com, I need the header image to be responsive so it shows correctly on desktops to cell phones. I’ve tried several solutions I’ve seen in the forums like using the logo with some custom css code but I can’t get it to work correctly. We need the heading to be exact like you see it on a regular desktop with no gaps on the top, bottom, or sides for all sizes of screens.
I’m currently using the custom background image in the logo area.
Thank you!
Hey norcalnathan,
Thank you for using Enfold.
You should extract the “Mike Sledge” text and upload it as the theme’s logo. After that, you can manually insert the profile pic via filter.
// https://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
IF you really want to apply it as a background, you have to create multiple css media queries to adjust the background size on different screen sizes.
@media only screen and (max-width: 1024px) { .header_color .header_bg { background-size: contain; } }Are you using a custom menu plugin?
Best regards,
IsmaelHi Ismael,
I’m using Max Mega Menu plugin. I will try your suggestion about using a widget however I’m not sure if I will be able to duplicate the font like the author wants.
Thanks,
Nathan
Ok I tried the widget. I put the link for the image that has both the text and the author pic in the textbox of the widget.
The image was responsive when I shrunk the screen which was good. However there were some spacing issues.
This is what is should look like http://mikesledge.com/wp-content/uploads/2017/12/correct.jpg. Notice the menu is right below the header image and the Soldier Dead image is immediately below the menu.
Using the widget in the header it looks like this. http://mikesledge.com/wp-content/uploads/2017/12/bad.jpg. There is a big gap between the header image and the menu bar and the Soldier Dead image starts right below the header image and the top part is obscured with the menu bar in the middle.
I tried several things to try to get the placement correct but was not successful. Any thoughts?
Thanks!
Nathan
Hi Nathan,
I suggest having text as text and photo on the side, this way there might be a chance to adjust those for different screen sizes.
Best regards,
VictoriaHI Victoria,
I am still struggling with this. I did what you said. Extracted the text as an image and made it the logo. I added a header widget with the image of the author along with the functions.php code and the custom css.
I can’t seem to get the header widget all the way to the right. Also even with it where it is (slightly off center), if I shrink the screen, the widget does not shrink. The logo does. You can see what it looks like here http://mikesledge.com/wp-content/uploads/2017/12/widgettest.jpg
Also we do have the option to upload a background image to the logo area. That is what I’m doing. Should that not be responsive? I think it should which would solve my problems.
So unless I’m doing something wrong. this solution doesn’t seem to work. I’m having to revert the site back to how it was originally as it’s in production.
All I want is to have an image that is 100% of the container width to be responsive to all screen sizes. This seems like such a basic thing.
Appreciate any help.
Nathan
Hi Nathan,
Do you have a test site, where you can leave the text and the image and we can play with it a bit?
Best regards,
VictoriaHI Victoria
Did my private message with the test site info get posted to you? Not sure if it did…
Thanks,
Nathan
Hi Nathan,
I don’t think that got posted since the only thing I can see in private is login details in your first post. Could you try to post it again please?
Best regards,
RikardHi Nathan,
Please remove your code for text widget and use my code:
.responsive #header_main .container { background: #faf8e9; } #header .widget { left: auto; padding-top: 0; position: absolute; top: -188px !important; right: -9px; } @media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .logo { float: left; width: 55%; top: 20px; } }Also, the image with the text has 1px on the right that needs to be cut off. It has gray pixels.
Best regards,
VictoriaHi Victoria,
This is much better however the author pic does not appear on mobile devices. The text is resizing correctly.
I’m not sure why the logo image is dissappearing. I took a look at options and didn’t see anything suppressing it.
I’ll work on the px after everything else is working.
Thanks!
Nathan
Hi Nathan,
The code I gave you is for tablet since the image was disappearing on the mobile before anyway.
Best regards,
VictoriaHi Victoria,
I’m not sure why you respond that way. My original ticket said I needed to have everything showing from a desktop to all sizes of screens (meaning cell phones).
So please revisit the solution to include all devices and screen sizes from a desktop to a mobile phone. The text Mike Sledge and the profile pic need to show and be responsive on all devices and screen sizes.
Thanks,
Nathan
Hi Nathan,
You’re using a menu plugin and a custom header, making all these things work together for all screen sizes is a bit out of the scope of our support. You might want to consider hiring a freelancer to help you with that.
Best regards,
Victoria
- You must be logged in to reply to this topic.