How to make the theme fullscreen?

[ernestszafinxParticipant]

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!

[Nitu ShresthaModerator]

@ernestszafinx

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

Thanks.

[ernestszafinxParticipant]

@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

[NilanModerator]

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

[ernestszafinxParticipant]

@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: https://prntscr.com/kyn5qy

Thanks!

[NilanModerator]

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

[ernestszafinxParticipant]

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: https://prntscr.com/l0yeyj

Is it possible to move it?

[RajeshModerator]

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.

[ernestszafinxParticipant]

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?

[NilanModerator]

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

[ernestszafinxParticipant]

@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?

[RajeshModerator]

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.

[ernestszafinxParticipant]

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.

[RajeshModerator]

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.

[Author]

Posts