Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 30, 2017 at 7:27 am #883285
    norcalnathan

    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!

    December 4, 2017 at 6:53 am #884530
    Ismael

    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,
    Ismael

    December 6, 2017 at 10:12 am #885457
    norcalnathan

    Hi 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

    December 6, 2017 at 10:39 am #885464
    norcalnathan

    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

    December 6, 2017 at 12:43 pm #885548
    Victoria

    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,
    Victoria

    December 14, 2017 at 6:20 am #888755
    norcalnathan

    HI 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

    December 14, 2017 at 3:25 pm #888924
    Victoria

    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,
    Victoria

    December 15, 2017 at 3:50 am #889183
    norcalnathan

    HI Victoria

    Did my private message with the test site info get posted to you? Not sure if it did…

    Thanks,

    Nathan

    December 15, 2017 at 9:14 am #889230
    Rikard

    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,
    Rikard

    December 15, 2017 at 9:18 am #889231
    norcalnathan

    See info below in private content

    December 16, 2017 at 6:58 pm #889632
    Victoria

    Hi 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,
    Victoria

    December 16, 2017 at 9:14 pm #889699
    norcalnathan

    Hi 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

    December 18, 2017 at 5:53 pm #890126
    Victoria

    Hi Nathan,

    The code I gave you is for tablet since the image was disappearing on the mobile before anyway.

    Best regards,
    Victoria

    December 19, 2017 at 1:48 am #890304
    norcalnathan

    Hi 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

    December 20, 2017 at 2:42 pm #890773
    Victoria

    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

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.