Fix Header Height in Remnant
-
-
- TYK
- Sr. Rocketeer
- Posts: 214
- Thanks: 0
-
Greetings.
Could you please direct me to best how to fix header height so this modules blend together again. This height changes depending on the amount of content in the mini player or event list. Probably best to have a fixed height that I can change when necessary. I'm using Remnant.
www.welcometothenumb.com
Thanks
This image is hidden for guests.
Please log in or register to see it. - Last Edit: 4 years 10 months ago by TYK.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You mean you want that background image to alway prioritize on height rather than width?
Use this code:
#g-page-surround { background-size: auto 100%; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- TYK
- Sr. Rocketeer
- Posts: 214
- Thanks: 0
- Unfortunatley Mark this doesn't fix my issue. Sorry for not being clear. Basically the section under the event list floats around dependent on how full the event list is and doen't make things look nice. I hope my screenshots help clear up what I'm struggling with. Thanks
- Last Edit: 4 years 9 months ago by TYK.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ok, let me explain what is happening and why it does what it does.
The sections of the page are all inside one container called "page surround". The image you are using is a background image on this container and your have it set so that the image always fits the width 100%, therefore the height of that image is going to vary as the width of the viewport changes (as you don't want to distort the aspect ratio of the image) and so this is why the image is sometimes beneath the sections and sometimes not.
So... what can you do about this? You need to prioritise the height of that image over the width:
#g-page-surround { background-size: auto 100%; }
The next thing you need to do is to ensure that should the image extend under those images in the above section that you obscure it by giving the above section a solid background...
} #g-above { background: #14151E; }
Hopefully that's closer to what you want but it's probably the best you can do.
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.053 seconds