Alternative basic CSS styles for Jupiter that I use


#1
sup {
    top: 0;
}
sub {
    bottom: 0;
}
#theme-page {
    overflow: hidden;
}
.mk-grid {
    width: auto;
}
#mk-page-introduce {
    padding: 40px 0 20px;
}
.page-title {
    margin: 0 15px 20px;
    line-height: inherit;
}
.page-subtitle {
    display: block;
    line-height: inherit;
    margin: 0 15px 20px;
}
#mk-breadcrumbs .mk-breadcrumbs-inner {
    float: none;
    display: block;
    margin: 0 15px 20px !important;
    line-height: inherit;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
}
.mk-padding-wrapper {
    padding: 0;
}
#theme-page .theme-page-wrapper .theme-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.theme-page-wrapper:not(.full-width-layout) {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.page-section-fullwidth .vc_col-sm-12:not(.vc_column_container),
.theme-page-wrapper:not(.full-width-layout) .mk-fullwidth-true.vc_row .vc_col-sm-12:not(.vc_column_container) {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.theme-page-wrapper:not(.full-width-layout) .mk-fullwidth-true.vc_row.add-padding-0 .vc_col-sm-12 {
    padding-left: 0!important;
    padding-right: 0!important;
}
.mk-full-content-true:not(.add-padding-0) .vc_col-sm-12:not(.vc_column_container) {
    padding-left: 15px;
    padding-right: 15px;
}
.theme-page-wrapper:not(.full-width-layout) .vc_inner.vc_row:not(.add-padding-0),
.theme-page-wrapper:not(.full-width-layout) .attched-true.vc_row {
    margin-left: -15px!important;
    margin-right: -15px!important;
}
#theme-page .theme-page-wrapper.full-width-layout {
    margin: 0;
}
.mk-fancy-title,
.wpb_content_element {
    margin-bottom: 0;
}
.mk-animate-element:not(.mk-in-viewport) {
    animation: none;
    -webkit-animation: none;
}
div.wpcf7-response-output.wpcf7-display-none {
    display: none;
    margin: 0 0 20px;
}
div.wpcf7 .ajax-loader {
    position: absolute;
}
.hidden-nb {
    display: block!important;
}
.visible-nb {
    display: none!important;
}
#sub-footer {
    padding: 20px 0 0;
}
.mk-footer-copyright {
    line-height: inherit;
    padding: 0 15px 20px !important;
    opacity: 1;
}
#mk-footer-navigation ul li a {
    margin: 0 15px 20px;
    font-size: inherit;
    line-height: inherit;
    opacity: 1;
}
.mk-image-lightbox {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
@media all and (max-width: 1023px) {
    [class*=vc_col-sm-] {
        float: none;
        width: auto;
    }
    .hidden-nb {
        display: none!important;
    }
    .visible-nb {
        display: block!important;
    }
}
@media all and (max-width: 767px) {
    .hidden-sm {
        display: none!important;
    }
    .visible-sm {
        display: block!important;
    }
}

This code does:

  • gives more space on small screens by reducing side paddings to only 15px
  • removes unnecessary Fancy Title and other elements margin bottom
  • fixes minor bugs of some elements
  • makes grid to be in one line at the edges of the screen
  • makes columns responsive state at 1023px (they become fullwidth)
  • makes ‘Hidden on netbooks’ shortcode option to trigger at max-width: 1023px
  • fixes ‘Animate element’ appearance glitch
  • adds basic reset styles for common tags
  • improves Contact Form 7 system messages appearance
  • makes Image link full size
  • reduces some vertical margins/paddings

One of the ways to use this code: When you install a Jupiter template and are not satisfied with responsive page apperance, copy this code in your Theme Options - Advanced - Custom CSS, hit Save and double refresh your page for cache to kick in. Check for css styles priority.

Tested on Jupiter version 6.1.3.

Full Width page layout can not be fully supported. You will get extra paddings on rows that are not fullwidth on small screens (default row options). To avoid that, you have to check “Full Width Row” option and uncheck “Full Width Content?” option as you would normally do to set a background for a row.


#2

I just don’t get how it’s taking them so long to fix the smallest things. I’ve been using a lot of these too. Especially the theme-page margin fixes.


#3

Yeah this is my second post about this problem. Just take a look at any responsive version of a template, there are always some side margin problems. Besides they made new fullwidth row behavior based on scripts, so that these rows are displayed not fullwidth while the page is loading and it spoils the viewing experience.


#4

Updated code for this style priority.


#5

Updated code for page section fullwidth side paddings of .vc_col-sm-12


#6
.mk-image-lightbox {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

Added code for image shortcode lightbox link to be of full width and height.


#7

Unfortunately Jupiter has gone crap… I used to be able to go around some bugs in the past. The last 2 versions are unworkable.


#8
.theme-page-wrapper:not(.full-width-layout) .vc_inner.vc_row:not(.add-padding-0) {
    margin-left: -15px!important;
    margin-right: -15px!important;
}

Code updated with ":not(.add-padding-0)"
For fixing inner row “attached columns” margins.


#9
@media all and (max-width: 767px) {
    .hidden-sm {
        display: none!important;
    }
    .visible-sm {
        display: block!important;
    }
}

Fix for 2px gap for my responsive standards, which begin from 767px of screen width, not from 765px as Jupiter suggests here.


#10
.mk-padding-wrapper {
    padding: 0;
}

Removed unnecessary responsive side paddings in sections.


#11
#theme-page .theme-page-wrapper .theme-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

Added !important to fix posts layout.
Removed selector #mk-footer .mk-padding-wrapper here. Because of many footer layouts, you have to restyle its grid individualy. And this style is supposed to break default templates layout.


#12

+1, If I don’t see some big improvements in upcoming releases in terms of both performance and standards then I’m gonna start considering other themes going forward. I don’t know where it all went wrong. At one point Jupiter was heading in a very positive direction with a big focus on performance. Standards just appear to have dropped. Users shouldn’t have to spend time creating workarounds for functionality that should work out of the box.

Can anyone from the dev team chime in here and provide some reassurance or confirm if all the css kindly provided by contorra above will be integrated into the theme etc?


#13

Hi Jason,
This is Mohsen from the support team. Usually, these small issues will be fixed if you just change the page layout to Full Width Layout instead of Full Layout. The issue is, Full Layout calculates the Height and widths and positions of each element using JS. Now if a plugin or a third party customization effects on the page, it may add such issues. To resolve this, simply change the page layout to Full Width layout. It will put it back to the CSS only positioning and resolves such issues most of the times.

In case you noticed any other issues, would be much appreciated if you provide a link (if it’s under maintenance, please provide credentials in private) so we see what is wrong there.

Thanks for the heads up and looking forward to your feedback.

Regards


#14

Mohsen-- thank you for this! I just tested it, and it fixed some of my problems as well!


#15

Thanks for taking the time to reply and provide that info. That’s both much appreciated and very reassuring too. All the best.


#16

Thank you very much! I haven’t even thought about this solution. Hope it will easily solve these fullwidth glitches.
It seems that this option is only available at Jupiter Page Option, so it must be set for every page individually. It works and css grid from this topic does not support it… yet.


#17

Added fix for attached columns option in one case.
Tested on Jupiter version 6.1.3.


#18

Added support for Full Width page layout.
Full Width page layout can not be fully supported. You will get extra paddings on rows that are not fullwidth on small screens (default row options). To avoid that, you have to check “Full Width Row” option and uncheck “Full Width Content?” option as you would normally do to set a background for a row.