Change (min-widht: xpx)

#1

Hi,

I want to change some of the responsive settings. The content should have more width on large screens.

So I need to change some code, but where do I find them?

These are the optimized lines:

@media (min-width: 1420px)
.container {
width: 1420px;
}

media=“all”
.content-area {
*
width: 1000px;
}

I think, that was all to change with this problem.

Also I want to make the site-navigation only on mobile devices (max-width: 991px) as position: fixed; .

How can I change these?

Benedict Mende

#2

Hello Benedict,

To apply your css code in above, you can put those css code using simple custom css plugin or you can also put it to the styles.css if you already using child theme. Referring to the code above, here is the complete css code:

@media (min-width: 1420px){
  .container {
     width: 1420px;
  }
}

.content-area {
  width: 1000px;
}

By the way, are you sure you use screen with 1420px width? not 1024px?

And I think its not best choice if you want the site-navigation to be fixed positioned when it displayed on mobile device because as default from wordpress, there is already wordpress bar displayed in the top of the page (the wordpress bar showed automatically only when you logged in to dashboard).

But of course you can try it:

@media screen and (max-width: 991px){
  .has-banner .main-navigation {
    position: fixed;
  }
}

Best regards,
Awan

#3

Thanks! That was all I wanted to know!

PS.: I love your designs!