Solved Templates

Section disappears on big screen desktop

Asked by Rick Nelson 5 years ago Last activity 5 years ago

I am using the scuba diving template and in early development.
When displaying for what would be most desktops tablet and phone everything seems to appear fine. But when on my 27 inch MAC i have noticed that if you go (drag) to full screen width the top section (a slide show and text) disappears.

There is a good bit of custom css for this section but I have no idea how to fix it. I assumed that is is a min/max width setting.
Site is sportfish.fish
login is in hidden
I have a fresh backup.

Thanks for any input.

Accepted answer

Marked as the solution

Rashida Rahman Staff

5 years ago

Hi there!

Sorry for the inconvenience!

There is a media query set for 1630px as a max-width, so you can increase the max-width value as per your need.
Here is a sample code you need to put in your custom CSS(I have used 1800px as an example):

@media (max-width: 1800px) and (min-width: 992px){
#sppb-addon-1598254218980 .sp-slider-outer-stage {
    height: 720px!important;
}
}

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Hope this will solve the issue for you!

Best Regards

6 more replies

Rick Nelson Asked this

5 years ago

Thanks so much. I thought it was a problem with the custom CSS but was timid about trying to fix it without guidance.

Your help is greatly appreciated.
Thanks

Rashida Rahman Staff

5 years ago

No issues!

You are always welcome:)

Rick Nelson Asked this

5 years ago · edited

I have an update on this. It would not work by going to template settings and custom css for the general template because the home page had some significant custom CSS elsewhere in the add-on itself. It had no effect.

What I did though was go to the sp slider itself > tools> style and found a lot of Custom CSS code there. Then I located the media section of the css ( like what you suggested) and changed the max with to 2048. This solved the issue and I can now go full screen on a big monitor.

Rashida Rahman Staff

5 years ago

Glad that you have sorted things out again:)

Rick Nelson Asked this

5 years ago

super help on this issue

Rashida Rahman Staff

5 years ago

Thanks for your appreciation!