Width of header and pages

I have to say that I think it looks really great. Very professional and clean.

What you’re not yet using is media queries that are built in to the bootstrap responsive design. There are various break-points (see here), where the design “jumps” to be responsive to the current viewport. Nikeo has also added @media (max-width: 320px) {...}, which is specific to the iPhone and smaller.

Wrapping your style rules with one of the following:

@media (min-width: 1200px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (max-width: 767px) {}
@media (max-width: 480px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (min-width: 1200px) {}
@media (max-width: 979px) {}
@media (min-width: 980px) {}
@media (max-width: 320px) {}

will allow you to place CSS that will only fire when the viewport is inside the specified size-range(s).
For example:

@media (min-width: 1200px) {
   p {
   color: blue;
   }
}

will make all your text blue when the screen is really wide (wider than 1200px), but not when it is narrower (try it in Custom CSS). Make sure you include the double sets of curly brackets (one set for the media query and one set (each) for the rule(s).

Playing around with the media queries will probably give you the fine-tune control you’re looking for.

Thanks for the compliment ElectricFeet! Good to know I’m on the right track ??

This info is brilliant! Thank you!!! I will play around with it and I’m sure eventually I’ll get there. Thanks again for all the help.

@nikeo, this is probably concise enough for the FAQ.

<li><a href="https://www.ads-software.com/support/topic/width-of-header-and-pages">change something <em>only</em> on tablets or smartphones?</a></li>
in the “Other styling section”.

p.s. you can now remove the “make my CSS work — it won’t work in Custom CSS?” item, as you removed the restriction.

p.p.s. The text “How do I:” as a <p></p> somehow got deleted from the top of all the questions after the credits.

@electricfeet, just wanted to say the media queries worked really well. I now have so much more freedom with the design. Thank you so much!

@electricfeet : FAQ updated!

@tasha : this is resolved, thanks to @electricfeet!

Great site Tasha !
I wonder how did you manage to replace the demo-slider to a 2column side at the frontpage.

Hi, apologies for the slow reply.

I made my own custom template from the “custom example template” which uses two columns. I then disabled the default slider: Customiz it! > Front Page > slider options. Then choose “No Slider”.

I then added the shortcode for the Meta Slider Light plugin to my custome home page and added widgets as normal for the sidebar.

Hope that helps!

Wonderfull Tasha !

I followed your instructions but the futures circles appear above instead of below of the home page. What changes did you made in the custome-page.php to make this done?. One other thing. In my custome home page I changed the Layout to a two column sidebar whitout effect. How come?

Hello Tasha, thanks for sharing such nice customization.
I tried to add the meta slider plugin in the custom home page.
May I kindly ask you where you inserted?
thanks in advance!

@bsal62 What I did is the following:

Move this code:
do_action( ‘__fp_block’ );
to just above the footer call, so just before:
get_footer();

That should move it below what ever you put in the homepage.

Regarding the sidebar: Did you select Right or left sidebar in your homepage. So in Pages > Home (or what ever you called the page) look for Layout Options and select your sidebar.
Also, in Customiz it! > Frontpage > Set up the front page layout > choose the correct sidebar.
If you’ve done that make sure you have something in the sidebar: Appearance > Widgets > Add what ever widget you want to display in the correct sidebar.

Hope that helps!

@stefanow12 I added the shortcode (in my case [metaslider id=2011]) straight to the page, so:

In WordPress admin > Pages > Home insert the shortcode.

Does that make sense?

Tasha, it does indeed ?? thanks a lot, I was completely mislead by the plugin, I thought that I had to modify something else in php.
Thanks for clarifying!

Have a good day

Best regards,
Stefano

Glad to help!

Tasha, I couldn’t find either “do_action( ‘__fp_block’ )” or “get_footer()” in the original file of “custome-page.php”. Am I in hte wrong track?

@bsal62 I don’t really know what to suggest. This is the full code of the original custom-page.php

<?php
/*
Template Name: Custom Page Example
*/

get_header();
    do_action( '__fp_block' );
    do_action( '__breadcrumb' );
      ?>
        <div class="container" role="main">
            <div class="row">
                <?php
                    do_action( '__sidebar' , 'left' );
			        	do_action( '__loop' );
                    do_action( '__sidebar' , 'right' );
                ?>
            </div><!--#row -->
        </div><!-- #container -->
    <?php
get_footer();
?>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

What does yours look like?