Question regarding bootstrap with wordpress

I’m working on a wordpress website that has a third-party custom theme. The custom theme … Read more Question regarding bootstrap with wordpress

I’m working on a wordpress website that has a third-party custom theme. The custom theme allows me to use WPBakery builder to add blocks to the website however, the area where I can add blocks and another sidebar that came with the theme are in the wrong order when viewed from a small screen. When looking at the generated html file and the styles section from the browser’s dev tools, There are mainly 2 files that are used for the page’s style, bootstrap.min.css and skin-custom.css. There’s also a php file which is responsible for the functionality of the page, single.php . I have checked these files but I can’t see where I can change the elements order. I am a beginner wordpress and php developer and I would greatly appreciate any help on the subject. Thank you.

The style properties in bootstrap.min.css and skin-custom.css that are responsible for the block:

element.style {
}
.col-xs-12 {
   width: 100%;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, 
.col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
 float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, 
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, 
.col-md-2, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col- 
sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm- 
7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-2, .col-xs-3, .col-xs-4, 
.col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 .col-xs-12 {
  width: 100%;
 }
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col- 
 xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
 float: left;
 }
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col- 
 xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, 
 .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col- 
 sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, 
 .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, 
 .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
     position: relative;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }
 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }
 user agent stylesheet
 div {
     display: block;
 }
 body {
     font-family: 'Open Sans';
     font-size: 14px;
     line-height: 22px;
     color: #555555;
 }
 body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
  }
  html {
     overflow-y: scroll;
     font-size: 100%;
  }
  html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  html {
     font-family: sans-serif;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
  }
  :after, :before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
  }
  :after, :before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }

The php file:

<?php get_header();?>
<?php
if(!stm_is_magazine()) {
    get_template_part('partials/page_bg');
    get_template_part('partials/title_box');
} else {
    get_template_part('partials/magazine/content/breadcrumbs');
}
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="stm-single-post">
        <div class="container">
            <?php if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    if(!stm_is_magazine()) {
                        get_template_part('partials/blog/content');
                    } else {
                        get_template_part('partials/magazine/main');
                    }
                endwhile;
            endif; ?>
        </div>
    </div>
</div>

Source: CSS – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *