YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar john.hubickey asked

Different sidebar widths based on device or screen width

Is there any way to apply a variable width of the sidebars (20%, 25%, 30%, 33%, 20%, etc) based on the device/screen width?

For example, on large monitors we have sidebar set to 30% with no issues (only using one sidebar for entire site). As the device width decreases and we hit the "tablet" sizes (768px for example), we need a larger width for the sidebar, 40% is perfect until it jumps to the phone sizes and the layout changes. We have some customized styled forms in the sidebar that don't scale well so would like to keep their width so they fit.

However, I can't see a way to do this using the warp 7 customizer. We can have different copies of modules with Uikit styles for the size and style but there is no option for that as far as I can tell.

I almost tried to add new media queries to the custom.css to override the ".uk-width-medium-3-10" class and force it to be "40%" for both main and aside content but this is RIDICULOUS and a disaster waiting to happen.

Is there a way to modify or "add" a "media query" edit to the theme.less to allow for device size selection of sidebar widths?

Any help would be very appreciated.

========

I guess I wasn't clear on what I needed.
I am looking for a way to have different sidebar widths based on screen widths, not the various media queries for different screen sizes. Your comment about "media queries not a good idea" is confusing since that's exactly how warp works with uikit classes for different size displays. I simply would like sidebar widths to have the option for small, medium, large responsive widths.

I am looking to use Uikit and warp 7 but have the option to apply a 40% sidebar width from the template manager "Layouts" ONLY to tablet or "medium" widths. The sidebar percentages are only global values that apply to ALL sizes. There is no option to have the sidebar widths to be 40% just for "medium" screen widths, and 30% for large and above.

I want to avoid have a bazillionn complex media queries in my custom html overriding the core warp and uikit functionality. Would much rather modify theme.less or even the style theme.php to add that selection option in.

I may just completely override Uikit and customizer settings completely since the layout of the site will never change. Just hard code in the columns and widths. All of these core overrides make it difficult to update the template.

  • Joomla
  • UIkit
  • Katana

Edited

2 Answers

0

Avatar nemanja Support answered

give a link to your website in hidden section

media queries is a very bad way to go but anyways here you go some i collected over time :)

@media (min-width: 768px) and (max-width: 959px) {

}

@media (max-device-width: 800px) and (orientation: portrait) {
}
@media (max-device-width: 1280px) and (orientation: landscape) {
}
@media only screen and (min-width: 1224px) {

}
@media screen and (min-width: 1824px) {

}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 1024px) {

}

/Menu responsive fix on smaller screens/
@media only screen and (min-device-width : 960px) and (max-device-width : 1240px) {

}

/**/
@media only screen and (min-device-width : 800px) and (max-device-width : 980px) {

}

/Footer on smaller screens/
@media only screen and (min-device-width : 1030px) and (max-device-width : 1155px) {

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1029px) {

}

/* 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 */
}

0

Avatar nemanja Support answered

yeap in that case you'll have to do it as you want, but unfortunately i don t know how to help you on this request sorry

Know someone who can answer? Share a link to this question via email or twitter.