Modifications : header for phones + background + page

Hello.
I use your theme for the first time and it's only my second website Wordpress.

I use "spicepress-pro-2.9.2", with header layout = header overlap.

I have 3 problems on the website : https://pointtopaper.mh-editions.fr :

First : Header.
I have put an image for the background of the header size = 1600 × 200.
But when I see it on a phone, the image is deformed. (photo N1)



Second : BACKGROUND : MENUS
I would change the color "#21202e"  which is in the background of the menu (PHOTO-N2.png)

Third : PAGES
At this time my pages are 2/3 + 1/3
with in the right column the "search block" and the "archives block".
I would like remove the right column and have a simple page 3/3.

Thanks for your help.


PHOTO-N1.png
1701 x 1134 - 895K
PHOTO-N2.png
1720 x 817 - 281K

Comments

  • Hi, @rcasteran

    Thanks for contacting us!

    1. To do this, Go to Appearance >> Customize >> Additional CSS and add the given below custom CSS code:

    @media screen and (max-width: 767px) {
    .wp-custom-header img {
        height: 120px !important; }}
    @media screen and (min-width: 768px) {
    .wp-custom-header img {
        height: 150px !important; }}

    2. To change the color, Go to Appearance >> Customize >> Additional CSS and add the given below custom CSS code:

    @media (max-width:1100px){
    .navbar-custom .navbar-nav {
        background-color: #4e4bc2 !important;}}
    @media (max-width:500px){
    .navbar-overlapped{
       background-color: #4e4bc2 !important;
    }}

    Change the background-color values as per your need.

    3. To do this, use the Full-width page template in your pages. Refer to this screenshot.

    I hope it will work for you.

    Thanks
    Rishabh
  • Thank you very much.

    An another question.
    I would like a black background and not grey.

    best regards

    Remy
    Capture d’écran 2019-11-06 à 16.01.32.png
    1293 x 805 - 568K
  • Hi,

    To do this, add the given below custom CSS code in the Additional CSS box:

    .page-id-43 #wrapper{
    background: #000 !important;
    }

    I hope it will work for you.

    Thanks
  • Thanks for your answer, but it's not only  on one page but on all the website that I want a black background of the pages.
  • Hi,

    Replace the above CSS code by the given below code:

     #wrapper{
    background: #000 !important;
    }

    Thanks
Sign In or Register to comment.