Responsive container width

[snakebyte99]

Hi, the kleo theme has multiple media queries when resize the window but i want to maximise screen space when window is resized. By default kleo increases the page padding somewhere around width 990px.

What’s the best way of removing that. I want a simple

#main
width: 100%
max-width: 1200px

for all media queries

[Radu]

Hi,

Do it as you need to the resolution interval

I will add below some breakpoints css rules

COPY CODE

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

And inside your desired rules

.container {
max-width: 1280px !important;
}

The container limit the page width so you can control from there.

After you add the desired css rule to the resolutions that you need add it to wp-admin -> theme options -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[snakebyte99]

Hi,

I was hoping for a quicker solution, like removing kleo container queries and starting again. Ok thanks for the help.

One more question, the main navigation:
How to CSS override it so that it “collapses and switches to hamurger button” at a later point. ie it currently switches at width 990px but i want it to switch at 800px.

[Radu]

Hi,

No quick solution to change the breakpoint there are to many dependencies in app.css file, it’s not enough to change from a single place.

You will have to search in app.css and app.less where 991px appears and to change with your desired value and to change that.

You can edit directly the app.css file by removing what you don’t need then make a copy and save it in chid theme in this path /wp-content/thems/kleo-child/assets/css/app.css

COPY CODE

function sq7r_app_css_child() {
    wp_deregister_style( 'kleo-app' );
    wp_dequeue_style( 'kleo-app' );
    wp_enqueue_style('kleo-app', get_stylesheet_directory_uri() . '/assets/css/app.css');
}
add_action('wp_enqueue_scripts', 'sq7r_app_css_child', 999);

The function needs to be pasted in wp-content/themes/kleo-child/functions.php

NOTE : Child theme needs to be installed and activated.

Now the app.css file will be pulled from the chid theme.

The less files aren’t generated on every change they are additional so it’s sufficient to make the changes in the css file

Make sure to enable development mode On from wp-admin -> theme options -> miscellaneous.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[snakebyte99]

Hi,

Is your comment above for the question:

”
How to CSS override it so that it “collapses and switches to hamurger button” at a later point. ie it currently switches at width 990px but i want it to switch at 800px.
”

So I’m going to delete all nav queries relating to 991px and change that to 800px?

Thanks

[snakebyte99]

Also, is the buddypress item-nav menu handled in the same place as above? I want to change that so that it never collapses and switches to dropdown on smaller screens

[Radu]

Yes, in all places where 991px it’s.

Yes from there it should be, search in the file for the selector.

Cheers

R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[snakebyte99]

Hi again,

Are you sure the #item-nav for buddypress is handled in app.css? I can’t find it.

I want to remove the drop down toggle which occurs at width:480.
My #item-nav li are few and compact enough to always show as normal even on mobile

Please please help as I am stuck!

thanks again

[snakebyte99]

a friend has told me it is something to do with app.js

[snakebyte99]

found it, thanks anyway, its js

[Radu]

Hi,

Np, good luck

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[snakebyte99]

hi, i am having some issues and am trying to pin point it.
should i be modifying app.less as well? Can you explain what this actually does please?

[snakebyte99]

I dont know how to edit .less / compress css, have tried googling it but i think its a bit beyond my skill level lol. I spend hours trying to work out why enabling/disabling maintentance mode would break one thing and then vice versa.

Is there anyway I could send you the files you need (which i dont know) and then you do it and minify it for me. I literally only need break points altered for main nav and buddypress item-nav only

[Radu]

Hi,

App.less doesn’t need to be edited, it’s enough with the app.css then you can add the appcss file content here : https://cssminifier.com/ and minify it then paste the minified version into app.min.css

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts