Responsive Behaviour Issues

Home Forums Q’tron Responsive Behaviour Issues

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16281

    Blackfish16
    Participant

    Responsive Behaviour Issues

    Resolved

    Hi,

    On some pages on medium and small devices a section of blank white background appears below the header image and before the content / page background image, which seems a bit odd. There is no content or padding there in the desktop view or page builder view.

    Also, is it possible to modify the header behaviour for smaller devices? I would like to suppress the social icons menu to start with.

    Thanks in advance,

    James

    #16285

    Oliver Juhas
    Keymaster

    Hi James,

    Could you please provide an URL so I can test?

    Thanks and regards,

    Oliver

    #16384

    Oliver Juhas
    Keymaster

    Hi James,

    Replying to the info provided at your previous reply in other ticket:

    I don’t think it shows the issue in the wordpress responsive previews, but if I open it on my phone or tablet I get the blank region I mentioned.

    The issue of blank space is happening due to Intro section custom padding CSS you have applied which is not responsive. Here is the fixed version of that custom CSS:

    @media only screen and (min-width: 961px) {
      .site .intro {
        padding-bottom: 41.86%;
      }
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #16386

    Blackfish16
    Participant

    This is a private reply!

    This reply has been marked as private.
    #16388

    Oliver Juhas
    Keymaster

    Hi,

    Please note that you have applied the new style into your child theme, but the old style is applied in WordPress “Additional CSS” customizer option, which is outputted after your child theme styles and thus overriding theme. Please use only one of those custom CSS locations to prevent issues like this.

    To remove social icons in header on small screens please use this custom CSS:

    @media only screen and (max-width: 680px) {
      .site-header .social-links {
        display: none;
      }
    }

    Please try to use your browser’s code inspector to determine your theme modifications styles.

    Best regards,

    Oliver Juhas
    WebMan Design

    #16482

    Blackfish16
    Participant

    This is a private reply!

    This reply has been marked as private.
    #16489

    Oliver Juhas
    Keymaster

    Hi James,

    I’m sorry but it’s your custom CSS that causes that. Please note that you should be responsible for any custom theme modifications you apply, I do not provide support for them – please read terms of service.

    Here is custom CSS that should fix that:

    .intro-inner {
    	background-position: 50% 50%;
    }

    If you are not familiar with CSS and/or PHP coding, please consider hiring someone that can help you with the website.

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.