CYBER MONDAY SALE! 30% DISCOUNT!! Coupon code:cm30 Enjoy!!!

How to make the theme fullscreen?

Home Forums Spacious Free How to make the theme fullscreen?

This topic contains 13 replies, has 4 voices, and was last updated by  Rajesh 2 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1387063

    ernestszafinx
    Participant

    Hello,

    Right now the theme has white sides and is in the middle. I’d like to make the theme fullscreen, so that it fills out all the white background. How can I do it?

    Thanks!

    #1387256

    Nitu Shrestha
    Moderator

    @ernestszafinx

    Can you visit Appearance-> Customize -> Design -> Site Layout section and select Wide layout with content width of 1218px and check?

    Thanks.

    #1387347

    ernestszafinx
    Participant

    @Nitu Shrestha

    I did, but 1218px is not the entire page. My monitor is 1920px and there is a lot of space left on the sides. Is it possible to make full width for larger screens as well?

    As you can see, here it is full screen – https://themegrill.com/wp-content/uploads/2016/05/spacious-promo-image.png

    #1387415

    Nilan
    Moderator

    Hi ernestszafinx,

    Can you try the CSS below by adding it to the additional CSS box via Appearance-> Customize -> Additional CSS.

    .wide-1218 #featured-slider .slider-cycle {
        max-width: 100%;
    }
    
    .wide-1218 #featured-slider .slider-cycle img {
        width: 100%;
    }

    And also don’t forget to choose Wide layout with content width of 1218px.

    Hope this will be helpful to you.

    Regards,
    ThemeGrill Support

    #1387477

    ernestszafinx
    Participant

    @Nilan

    Hi, it worked, but there is another issue – the height of the slider is now over TG:Services widget. Is it possible to put TG:Services a bit lower, so that it doesn’t go over it? Here’s how it looks: http://prntscr.com/kyn5qy

    Thanks!

    #1387540

    Nilan
    Moderator

    Hi ernestszafinx,

    Can you provide us URL for your website so that we can inspect it and give you a proper solution?

    Regards,
    ThemeGrill support

    #1388173

    ernestszafinx
    Participant

    Hi @Nilan

    It works now, I don’t know what I did wrong before… Thank you!

    One thing that I would like to change, though, would be moving my logo to the left side of the screen. Right now it’s not completely on the left side, but still remains where it used to be. It looks like this: http://prntscr.com/l0yeyj

    Is it possible to move it?

    #1388260

    Rajesh
    Moderator

    Hi @ernestszafinx,

    You can move the logo to the left of the screen by using the following CSS:

    @media only screen  and (min-width : 1500px) {
      .wide-1218 .inner-wrap {
       max-width: 96%;
      }
    }

    Thanks.

    #1388293

    ernestszafinx
    Participant

    Hello, @Rajesh

    The code worked and it did move the logo to the left, however, it also increased the size for the rest of the page. Is it possible to move it without the whole page becoming bigger?

    #1388381

    Nilan
    Moderator

    Hi ernestszafinx,

    Please copy the CSS code and replace it with the CSS code that we’ve provided before by Rajesh.

    @media only screen  and (min-width : 1500px) {
         .wide-1218 #header-text-nav-container .inner-wrap {
             max-width: 96%;
         }
    }

    This should do the trick.

    Regards,
    ThemeGrill Support

    #1389123

    ernestszafinx
    Participant

    @Nilan

    Thank you, it worked! But, there is an issue…

    On a mobile phone, the header is very small and does not fit the ”Subscribe” button. Here is a screenshot – https://imgur.com/rCmSGZr

    Is it possible to fix this?

    #1389229

    Rajesh
    Moderator

    Hi @ernestszafinx,

    You can insert the below mentioned code to show the subscribe button in the mobile device. You can go to the Appearance > Customize > Additional CSS: in the dashboard and insert the code mentioned below:

    @media screen and (max-width: 420px) {
    #featured-slider .slider-read-more-button {
    display: block;
        }
    }

    Thanks.

    #1389498

    ernestszafinx
    Participant

    Hello @Rajesh,

    Thank you, it worked! Would it be possible to make it a bit bigger on the phone? A bit more vertical, so it fills out more of the homepage, because right now it seems quite tiny.

    #1389552

    Rajesh
    Moderator

    Hi @ernestszafinx,

    You can insert the font-size: 15px; below the display: block; in the recently provided code to make the font bigger. You can change the font size according to your specification.

    Thanks.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.