Problems with responsive mode

Hi there,

I am so thankful that there is a forum and people like you are willing to help beginners like me. I am about to publish my first website but the last step -making it responsive- causes me a major headache.

My problem is:

  • I’ ve made changes in the CSS-area: I adjusted the header height and the font size of the slider, but only in PC-mode. Now it does not change responsively in mobile preview and I have no idea what css-code I have to add to change it
  • in mobile view the header/navigation menu is covered by the slider below.

The website has to stay in maintenance mode. I would be happy to send you by E-Mail an administrator invitation.

Thank you very much in advance.

Hello there,

You can use CSS media query to apply style on specific screen size. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please note that editing styles.css file of the theme is improper way customizing your site. As all files will be overwritten once theme update performed in future. You have to use Additional CSS which is located under Appearance > Customize menu. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header,
      .site-header.fixed {
        position: static !important;
      }
    } 

Let me know how it works for you.

Regards,
Kharis

Hi,

thank you for the quick response.

Before I posted the question I’ve already tried some “@media only screen”-combinations/codes but they do not work and I’ve tried to put your offered CSS-code but nothing happens. I think it is because I’ve put in other CSS-codes and they do not get along well with each other.

Maybe it helps that I show you how I adjusted the header in the custom CSS:

    .site-header {
    	max-height: 100px !important;
    }	

    .site-logo{
       max-height: 300px !important;
    }

    .text-slider .maintitle:after {
        background-color: transparent;
    }

    .non-transparent .slider-wrapper {
      margin-top: 180px;
    }

    .site-header {
    	padding-top: 5px; 
    }

Here is the a screenshot of the website (where you can see the header):

Thank you so much for helping. I really tried my best but it is my first project and there is so much to learn.

Kind regards
Dana