Please advise with some CSS code

Please advise. Looking for CSS code to make a page look the same like another page.

  • Nithin
    • Support Wizard

    Hi allanlove,

    Hope you are doing good today. :slight_smile:

    It seems like the "About our Programme", and 'About our Classes" sections wasn't separate at the moment, and the changes done to one section would get reflected in another. I added an extra DIV, in your custom template, so both these sections are separate.

    I have added the following CSS inside your child themes style.css file:

    #content > div > div.about_our_programme {

    display: block;
    background-color: #fcea23;
    padding: 2% 32%;
    margin: auto -30%;
    min-height: 285px;

    }

    #content > div > div.about_our_programme > div.about_text_and_button > h2 {
    text-align: center;
    margin-bottom: 1%;
    }

    #content > div > div.about_our_programme > div.about_text_and_button {
    width: 60%;
    float: left;
    }

    #content > div > div.about_our_programme > div.slider_about {
    width: 40%;
    height: 230px;
    float: left;
    }

    #content > div > div.about_our_programme > div.about_text_and_button > p:nth-child(3) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 8%;
    border-radius: 24px;
    margin: 0% 31%;
    }

    #content > div > div.about_our_classes {
    clear: both;
    padding: 3% 0;
    display: block;
    min-height: 360px;

    }

    #content > div > div.about_our_classes > div.slider_classes {
    width: 320px;
    float: left;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button {
    width: 60%;
    float: right;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > h2 {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(2) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(3) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(4) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 8%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    And now the sections are displaying fine:

    Pleases check, and let us know if you have any further query. Have a nice day ahead. :slight_smile:

    Regards,

    Nithin

  • allanlove
    • The Incredible Code Injector
    <?php /* Template Name: Custom Franchisee Homepage */
    get_header(); ?>

    <?php
    /**
    * flash_before_body_content hook
    */
    do_action( 'flash_before_body_content' ); ?>

    <div><?php echo do_shortcode('[smartslider3 slider=32]');?></div>

    <div class="yellow_book_bar" style="color:#000; margin-bottom:30px; margin-top:0px;"><h2 style="color:#000!important; text-align:center!important;"><?php the_field('locations_covered'); ?></h2></div>

    <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php
    while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/content', 'page' );

    /**
    * flash_before_comment_template hook
    */
    do_action( 'flash_before_comment_template' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
    comments_template();
    endif;

    /**
    * flash_after_comment_template hook
    */
    do_action( 'flash_after_comment_template' );

    endwhile; // End of the loop.
    ?>

    </main><!-- #main -->
    </div><!-- #primary -->

    <?php
    /**
    * flash_after_body_content hook
    */
    do_action( 'flash_after_body_content' ); ?>

    <div class="section">
    <div class="coloured_squares">
    <a href="/gloucester/book"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/Book-A-Class.png" /></a>
    <a href="/gloucester/our-programme"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/Our-Programme-1.png" /></a>
    <a href="https://www.tumbletots.co.uk/"><img src="http://tumbletots.allanlove.net/wp-content/uploads/2018/03/Shop-1.png" /></a>
    <a href="#"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/Members-area.png" /></a>
    <a href="faqs"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/FAQs-1.png" /></a>
    <a href="/gloucester/testimonials"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/Testimonials.png" /></a>
    <a href="/gloucester/news"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/News.png" /></a>
    <a href="/gloucester/contact"><img src="http://tumbletots.allanlove.net/gloucester/wp-content/uploads/sites/9/2018/08/Get-in-touch-1.png" /></a>
    </div>
    </div>

    <div class="about_our_programme">

    <div class="about_text_and_button">

    <h2 style="color:#000;"> About our Programme </h2>

    <p style="color:#000; text-align: center; margin-right: 12%; margin-bottom: 37px;">Designed to develop children’s physical skills of agility, balance, co-ordination and climbing, through the use of brightly coloured Tumble Tots equipment. Child psychologists and educators agree that a structured programme in movement should be a part of every child’s education. </p>

    <a href="/our-programme">Read More ?</a>

    </div>

    <div class="slider_about">
    <?php echo do_shortcode('[smartslider3 slider=31]');?>
    </div>
    </div> <!-- about our programme -->

    <div class="about_our_classes">

    <div class="classes_text_and_button">

    <h2 style="color:#000; margin-top:20px;"> About our Classes </h2>

    <p style="color:#000;">Tumble Tots offers programmes to five different age groups. It is structured according to the different ages and stages of a child’s development:</p>

    <p>6 Months – Walking<br>
    Walking – 2 Years<br>
    2 – 3 Years<br>
    3 Years – School Age<br>
    Gymbobs (School Age – 7 Years)</p>

    <a href="/our-programme">Read More ?</a>
    </div>

    <div class="slider_classes">
    <?php echo do_shortcode('[smartslider3 slider=30]');?>
    </div>
    </div> <!-- about our class end -->

    <div id="icons_box">

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_physical"> <img class="image" src="/wp-content/uploads/2018/07/Physical.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Physical</h2>
    </div>

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_social"> <img class="image" src="/wp-content/uploads/2018/07/Social.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Social</h2>
    </div>

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_cognitive"> <img class="image" src="/wp-content/uploads/2018/07/Cognitive-development.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Cognitive</h2>
    </div>
    </div>

    <div class="testimonial sldier" style="margin-top:20px;">
    <?php echo do_shortcode('[testimonial_view id="2"]');?>
    </div>

    <div class="our_awards">

    <h2 style="color:#000; margin-top:20px; padding-top:10px;">Our awards and partners</h2>

    <div class="awards_slider">
    <?php echo do_shortcode('[logo-slider]');?>
    </div>

    </div>

    <div class="yellow_book_bar" margin-bottom:0px; margin-top:0px;"><h2 style="text-align:center!important;"><a class="bookclass" style="background: #e2231a; color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; border-radius: 36px; font-size: 25px!important;" href="/book">Book a class ?</a></h2></div>

    </div>

    <style>
    @media (max-width: 780px) {
    .icons_box_in {
    display: inline-block;
    float: left;
    width: 30% !important;
    }
    .icons_box_in image{
    max-width: 75% !important;
    }
    }

    @media (max-width: 780px) {
    .icons_box_in p {
    font-size:13px !important;
    }
    }
    .our_awards {
    text-align: center !important;
    background:#96c93d;
    width: 1920px;
    margin-left: -346px;
    }

    .awards_slider{
    width: 50%!important;
    content: center!important;
    margin-left: 462px;
    }

    .yellow_book_bar h1 {
    color: #fff!important;
    background-color: yellow!important;
    }

    .yellow_book_bar {
    width: 2000px;
    margin-left: -400px;
    padding-left: -100px;
    }

    .coloured_squares img {
    width: 280px;
    height: 240px;
    padding: 10px;
    }

    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    }

    #icons_box {
    background: #ffa500;
    }

    #icons_box {
    display: inline-flex;
    width: 100%;

    }

    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    margin-left: 10%;
    left: 19%;
    position: relative;
    }

    #icons_box {
    width: 2000px;
    margin-left: -400px;

    }
    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    margin-left: 10%;
    left: 19%;
    position: relative;
    }

    .lgx-logo-img {
    max-width:112px !important;
    max-height:112px !important;
    }
    .owl-carousel .owl-item {
    margin-right: -62px !important;
    }

    /* Style for Custom Homepage */

    #content > div > div.about_our_programme {

    display: block;
    background-color: #fcea23;
    padding: 2% 32%;
    margin: auto -30%;
    min-height: 285px;

    }

    #content > div > div.about_our_programme > div.about_text_and_button > h2 {
    text-align: center;
    margin-bottom: 3%;
    margin-top:2%;
    }

    #content > div > div.about_our_programme > div.about_text_and_button {
    width: 60%;
    float: left;
    }

    #content > div > div.about_our_programme > div.slider_about {
    width: 40%;
    height: 230px;
    float: left;
    }

    #content > div > div.about_our_programme > div.about_text_and_button > a:nth-child(3) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 6%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    #content > div > div.about_our_classes {
    clear: both;
    padding: 3% 0;
    display: block;
    min-height: 375px;

    }

    #content > div > div.about_our_classes > div.slider_classes {
    width: 320px;
    float: left;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button {
    width: 60%;
    float: right;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > h2 {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(2) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(3) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > a:nth-child(4) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 6%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    /* Style for custom Homepage Ends here */

    </style>

    <?php
    get_sidebar();
    get_sidebar( 'left' );
    get_footer();

  • allanlove
    • The Incredible Code Injector

    Hello,

    I have made another page using a template and post type which looks ok on desktop but on mobile and tablet it looks terrible.

    Please could you also help me fix this too?

    http://tumbletots.allanlove.net/gloucester/custom-about-page/ This is the custom page

    http://tumbletots.allanlove.net/gloucester/about-us/ This is the page which is should look like on mobile

    I have attached the template for it.

    Regards

  • allanlove
    • The Incredible Code Injector
    <?php /* Template Name: Custom Franchisee About Us Page */
    get_header(); ?>

    <?php
    /**
    * flash_before_body_content hook
    */
    do_action( 'flash_before_body_content' ); ?>

    <div><?php echo do_shortcode('[smartslider3 slider=19]');?></div>

    <div class="green_header_bar" style="color:#000; margin-bottom:-2px; margin-top:0px;"><h1 style="color:#fff!important; text-align:center!important;">About Us</h1></div>

    <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php
    while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/content', 'page' );

    /**
    * flash_before_comment_template hook
    */
    do_action( 'flash_before_comment_template' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
    comments_template();
    endif;

    /**
    * flash_after_comment_template hook
    */
    do_action( 'flash_after_comment_template' );

    endwhile; // End of the loop.
    ?>

    </main><!-- #main -->
    </div><!-- #primary -->

    <?php
    /**
    * flash_after_body_content hook
    */
    do_action( 'flash_after_body_content' ); ?>

    <div class="about_our_programme">

    <div class="about_text_and_button">

    <p style="color:#000; text-align: center; margin-right: 12%; margin-bottom: 37px;"><?php the_field('bio'); ?></p>

    </div>

    <div class="slider_about">
    <img src="<?php the_field('image'); ?>" />
    </div>
    </div> <!-- about our programme -->

    <div class="about_our_classes">

    <div class="classes_text_and_button">

    <h2 style="color:#000; margin-top:20px; margin-bottom:20px;"> Leading physical play programme </h2>

    <p style="color:#000;">Tumble Tots was established in 1979 by Bill Cosgrave, coach for the British Olympic Gymnastics team of 1968. Since then, we have prided ourselves on being the UK’s leading structured physical play programme for children from 6 months to 7 year olds.</p>

    <a style="background: #e2231a; color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; border-radius: 36px; font-size: 20px!important; margin-left: 35%;" href="/our-programme">Find out More ?</a>
    </div>

    <div class="slider_classes">
    <?php echo do_shortcode('[smartslider3 slider=39]');?>
    </div>
    </div> <!-- about our class end -->

    <div class="about_springboard">

    <div class="about_text_and_button">

    <h2 style="color:#000; margin-top:20px; margin-bottom:20px;"> The springboard to confidence for your child </h2>

    <p style="color:#000;">Tumble Tots has over 300 centres in the UK operated by more than 65 Franchisees and a membership throughout the year of approximately 35,000 children. Our programme has benefited more than two million children since it began, instilling in them, a healthy and active lifestyle and the confidence, to reach their maximum potential.</p>

    <a style="background: #e2231a; color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 35px; padding-right: 35px; border-radius: 36px; font-size: 20px!important; margin-left: 35%;" href="/book">Book a trial ?</a>
    </div>

    <div class="slider_about">
    <?php echo do_shortcode('[smartslider3 slider=33]');?>
    </div>
    </div> <!-- the springboard to confidence end -->

    <div class="about_our_classes">

    <div class="classes_text_and_button">

    <h2 style="color:#000; margin-top:20px; margin-bottom:20px;"> Committed to building a healthier future </h2>

    <p style="color:#000;">Tumble Tots believes that every child should have the opportunity to experience the joys of growing up, the challenges of developing new skills and the satisfaction of success. Every child that attends Tumble Tots are given a safe environment to do so whilst having fun and receiving a sticker of achievement at the end of every class.</p>

    <a style="background: #e2231a; color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 35px; padding-right: 35px; border-radius: 36px; font-size: 20px!important; margin-left: 35%;" href="/member">Become a member ?</a>
    </div>

    <div class="slider_classes">
    <?php echo do_shortcode('[smartslider3 slider=41]');?>
    </div>
    </div> <!-- about our class end -->

    <div id="icons_box">

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_physical"> <img class="image" src="/wp-content/uploads/2018/07/Physical.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Physical</h2>
    </div>

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_social"> <img class="image" src="/wp-content/uploads/2018/07/Social.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Social</h2>
    </div>

    <div class="icons_box_in">
    <p style="font-size:20px; margin: 0;" id="cf_cognitive"> <img class="image" src="/wp-content/uploads/2018/07/Cognitive-development.png" alt="" width="175" height="175"></p>
    <h2 style="color:#000;">Cognitive</h2>
    </div>
    </div>

    <div class="testimonial sldier" style="margin-top:20px;">
    <?php echo do_shortcode('[testimonial_view id="2"]');?>
    </div>

    <div class="our_awards">

    <h2 style="color:#000; margin-top:20px; padding-top:10px;">Our awards and partners</h2>

    <div class="awards_slider">
    <?php echo do_shortcode('[logo-slider]');?>
    </div>

    </div>

    <div class="yellow_book_bar" margin-bottom:0px; margin-top:0px;"><h2 style="text-align:center!important;"><a class="bookclass" style="background: #e2231a; color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; border-radius: 36px; font-size: 25px!important;" href="/book">Book a class ?</a></h2></div>

    </div>

    <style>
    .yellow_book_bar {
    width: 2000px;
    margin-left: -400px;
    padding-left: -100px;
    }

    .awards_slider {
    max-width: 600px;
    }

    @media (max-width: 780px) {
    .icons_box_in {
    display: inline-block;
    float: left;
    width: 30% !important;
    }
    .icons_box_in image{
    max-width: 75% !important;
    }
    }

    @media (max-width: 780px) {
    .icons_box_in p {
    font-size:13px !important;
    }
    }

    @media (min-width: 780px) {
    .our_awards {
    width: 1920px;
    margin-left: -346px;
    }
    }
    .our_awards {
    text-align: center !important;
    background:#96c93d;
    }

    @media only screen and (max-width: 780px) {
    .owl-stage-outer {
    width: 60%;
    }
    }

    @media (min-width: 780px) {
    .awards_slider {
    width: 50%!important;
    content: center!important;
    margin: auto;
    }
    }

    @media (max-width: 780px) {
    .awards_slider {
    margin: auto;
    width: 300px !important;
    }
    }

    @media (max-width: 780px){
    .owl-carousel .owl-stage-outer {
    width: 240px;
    }
    }

    .green_header_bar {
    width: 2000px;
    margin-left: -400px;
    padding-left: -100px;
    }

    .coloured_squares img {
    width: 280px;
    height: 240px;
    padding: 10px;
    }

    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    }

    #icons_box {
    background: #ffa500;
    }

    #icons_box {
    display: inline-flex;
    width: 100%;

    }

    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    margin-left: 10%;
    left: 19%;
    position: relative;
    }

    #icons_box {
    width: 2000px;
    margin-left: -400px;

    }
    #icons_box .icons_box_in {
    float: left;
    text-align: center;
    margin-left: 10%;
    left: 19%;
    position: relative;
    }

    .lgx-logo-img {
    max-width:112px !important;
    max-height:112px !important;
    }

    /* Style for Custom About Us page */

    #content > div > div.about_springboard {

    display: block;
    background-color: #3ebeef;
    padding: 2% 32%;
    margin: auto -30%;
    min-height: 295px;
    }

    #content > div > div.about_springboard > div.about_text_and_button > h2 {
    text-align: center;
    margin-bottom: 3%;
    margin-top:2%;
    }

    #content > div > div.about_springboard > div.about_text_and_button {
    width: 60%;
    float: left;
    }

    #content > div > div.about_springboard > div.slider_about {
    width: 30%;
    height: 200px;
    float: left;
    }

    #content > div > div.about_springboard > div.about_text_and_button > a:nth-child(3) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 6%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    #content > div > div.about_our_programme {

    display: block;
    background-color: #fcea23;
    padding: 2% 32%;
    margin: auto -30%;
    min-height: 285px;

    }

    #content > div > div.about_our_programme > div.about_text_and_button > h2 {
    text-align: center;
    margin-bottom: 3%;
    margin-top:2%;
    }

    #content > div > div.about_our_programme > div.about_text_and_button {
    width: 60%;
    float: left;
    }

    #content > div > div.about_our_programme > div.slider_about {
    width: 30%;
    height: 200px;
    float: left;
    }
    #content > div > div.about_our_springboard > div.slider_about {
    width: 30%;
    height: 200px;
    float: left;
    }

    #content > div > div.about_our_programme > div.about_text_and_button > a:nth-child(3) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 6%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    #content > div > div.about_our_classes {
    clear: both;
    padding: 2% 0;
    display: block;
    min-height: 260px;

    }

    #content > div > div.about_our_classes > div.slider_classes {
    width: 320px;
    float: left;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button {
    width: 70%;
    float: right;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > h2 {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(2) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > p:nth-child(3) {
    text-align: center;
    }

    #content > div > div.about_our_classes > div.classes_text_and_button > a:nth-child(4) {
    background: #e2231a;
    display: inline;
    color: white;
    padding: 2% 6%;
    border-radius: 24px;
    margin: 0% 38%;
    }

    /* Style for custom About Us Page Ends here */

    </style>

    <?php
    get_sidebar();
    get_sidebar( 'left' );
    get_footer();

  • Nithin
    • Support Wizard

    Hi allanlove,

    Sorry for the delay in getting back to you, the CSS looks scattered all over the site, you should be adding CSS in a single CSS stylesheet for all your pages, so that it would be easier to code it, for example in a child theme, it would be the style.css file.

    The following CSS is causing conflicts with trying to make the page fully responsive with mobile:

    @media (max-width: 780px) {
    .awards_slider {
    margin: auto;
    width: 300px !important;
    }

    }

    @media only screen and (max-width: 640px) {
    #icons_box .icons_box_in {
    left: 20%!important;
    }

    }

    @media only screen and (max-width: 640px) {
    #content>div div.about_text_and_button>a:nth-child(3), .about_our_classes .classes_text_and_button a:nth-child(3) {
    margin: 0 auto !important;
    }
    }

    I’m not sure where these CSS are embedded in your site, and what exact these CSS does. If you could temporarily remove the above CSS, and add the following CSS:

    @media screen and (max-width: 480px) {

    .sliderforabouttoshowdesktoponly {
    display: block !important;
    margin-top: 8% !important;
    }

    #franchiseopsdesktop > div.classes_text_and_button > a, #franchiseopsdesktop > div.about_text_and_button > a {
    margin: 0 22% !important;
    }

    #content > div > div:nth-child(7) > div.classes_text_and_button > a {
    margin: 0 19% !important;
    }

    #icons_box .icons_box_in {
    left: 4%!important;
    width: 30% !important;
    }

    #content > div > div.our_awards.our_awards.siteorigin-panels-stretch.panel-row-style {
    margin-top: -5% !important;
    }

    #content>div div.about_text_and_button>a:nth-child(3) {
    margin: 0 22% !important;

    }

    .awards_slider {
    margin: auto 3%;

    }

    .owl-stage-outer {
    width: 80% !important;
    }

    .owl-carousel .owl-item img {
    width: auto !important;
    }

    .awards_slider {
    width: 90% !important;
    }

    .owl-carousel .owl-item {
    width: 50px !important;
    }

    }

    @media screen and (max-width: 480px) {
    #content>div div.about_text_and_button>a:nth-child(3) {
    margin: 0 22% !important;

    }
    }

    It should help with making the page work in mobile view. You can add the CSS either in your child themes style.css file, or via default WordPress customizer, under Appearance > Customize > Additional CSS.

    Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.