Return to previous page

Full screen area under page header - by Joost van Kempen

This topic has 8 replies, 2 voices, and was last updated 10 years ago ago by Eva Kemp

Joost van Kempen

Participant

November 11, 2014 at 09:08

Hi 8theme support,

Is it possible to create a full screen area on a page just under the heading? For example for a map shortcode, so the map will display fullscreen directly under the header (title etc) area, and the content area below the map will be the global site width again.

Now I think about it, it’s just like the full screen revolution slider on the homepage, but instead of the slider I would like a custom shortcode. In my case for a map. Any way to get this done? Hope to hear from you soon.

Kind regards,
Joost

#24010 Copied

7 Answers

Eva Kemp

Support staff

November 11, 2014 at 18:12

Hello,

You can change map size with the code in custom.css file. To create it you need rename default.custom.css to custom.css via FTP in wp-content/themes/royal directory and enable the file in Theme Options > Custom CSS.

Thank you.
Regards,
Eva Kemp.

#24128 Copied

Joost van Kempen

Participant

November 13, 2014 at 14:57

Hi Eva,

I could change the width of the map, but it will always be the maximum width of the global site (with a white area on the left and right). I would like the map (or an image, or anything that could be placed into a div) to be fullscreen, and the content benead it just the normal site width again. Please see the example in the attached screenshots. Do you know how to arrange this?

Current situation:

Wished situation: image fullscreen

Kind regards,
Joost van Kempen

#24462 Copied

Eva Kemp

Support staff

November 13, 2014 at 22:00

Hello,

Please provide us with a page link on the site and wp-admin panel credentials.

Thank you.
Regards,
Eva Kemp.

#24559 Copied

Joost van Kempen

Participant

November 14, 2014 at 08:50

Hi Eva,

The website is running on a localhost, so unfortunately that is not possible. Why do you need admin credentials? It’s just CSS code/Visual Composer isn’t it?

Kind regards,
Joost

#24591 Copied

Eva Kemp

Support staff

November 14, 2014 at 11:49

Hello,

We need to see your page to provide you with the correct code. Sorry, but without a link it’s difficult to give a solution.

Thank you for understanding.
Regards,
Eva Kemp.

#24617 Copied
Joost van Kempen

Participant

November 14, 2014 at 12:11
Eva,

You need to see the page? It is a page with only some content of your own theme.

Nevermind, I figured it out myself now. For those who are looking for the same thing:

Just add the following code to your custom.css file:
```
.full-width-custom {
    margin-left:-100%;
    margin-right:-100%;
}
```
In the content, place the image in a div with the class “full-width-custom”, for example:
```
<div class="full-width-custom">
<img src="IMGURL.jpg">
</div>
```
That will do the job.

Regards,
Joost
#24630 Copied
Eva Kemp

Support staff

November 14, 2014 at 14:06

Hello,

We’re glad you’ve found the solution and shared it with others.

Have a good day!

Regards,
Eva Kemp.

#24652 Copied
Viewing 8 results - 1 through 8 (of 8 total)