Custom css appearing at the top of my page. Help!


#1

Hi guys…

I am trying to design a landing page for my business - www.thepoleroom.com.au/casualclasses As part of the template, I needed to place a fitness timetable for classes in one of the page sections. I use an external html timetable that is dynamic and increases or decreases depending on the number of classes I run each week. The problem with unbounce is that the page sections are static and do not move. As a result the timetable does not display correctly. 

When I emailed unbounce they directed me to a similar topic - https://community.unbounce.com/unbounce/topics/dynamic_unbounce_page_height and asked me to follow the instructions.

I have followed the instructions using javascript and custom css and even though I had no idea what I was doing, I successfully added the timetable to the bottom of my page!! Woohoo!!

Now that the feeling of elation has worn off, I have two questions for any tech genius out there:

  1. When I view the page live, the custom css is appearing at the top of my page. How do I hide it? 

  2. The timetable is being displayed at the bottom of the page. This is not ideal placement. Is there anyway I can place this timetable in one of my page sections above the ‘contact us’ form? 

Any help will be much appreciated!


#2

Hi Hristian

Thanks for all of your help. Happy new year to you too!

I’m not very handy with HTML so thanks for the tip.

I think that the timetable pop up/lightbox is going to be the best way forward. I have just applied to have the beta release inbuilt lightbox option trialed on my account… This way I wont have to code anything!! Woohoo.

Andi :slight_smile:


#3

Hi Andi, 

Welcome to the Unbounce community forum and happy new year. 

Now straight to your questions:

  1. You need to wrap your CSS code in CODE tags. I guess that’s the reason it’s appearing at the top of your page right now. 

  2. Currently, there is no easy way to adjust the page height as you’ve already found out. 

In your case, there are a few options:

  1. Leave the table at the bottom of the page.

  2. Adjust the height of your external HTML element to be the height of your biggest table. Although, in weeks that you have lesser number of classes, you’ll have an empty space below it.

or 

  1. Add the timetable as a popup/lightbox.

Personally, I would go for the lightbox option but I’m afraid these are your current options.

Best,
Hristian