Breakpoint and footer issues. - Post...

User 2206099 Photo


Registered User
7 posts

I just bought this SW, and generally I am pretty happy with it, not being a trained professional in web development, I have however a coupe of issues I would kindly ask your prompt support on:

First of all: I am using the Pulsar template which I have modified to my likings. I have created several break-points, and everything left of all the break-points looks great, but to the right of the last break point I still get the old Pulsar template. How do I apply my modified template just left of the last breakpoint, also to infinity to the right?

Secondly: How do I make the last row of my page extend to infinity? Now if you look at my web page www.jeanrik.com/contact-us.html you will find a white banner at the bottom of the page if running the web browser in full-screen mode. This is not the case for the main page or the about-us page. So somehow I managed there without knowing how...any ideas?

Thanks!

Henrik
User 103173 Photo


VP of Software Development
0 posts

The reason for that is you applied your styles to the breakpoint. You need to move the slider to the right of that breakpoint and then apply your styles.

For the row, simply check the box "Max-width" instead of defining a pixel size.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

First question: You need to modify the template before setting any breakpoints. Or if you have breakpoints, then move the slider to the right beyond the last one. But better and easier is to change the template first, then insert breakpoints.

Second question: The contents of the contact page is too short to push the footer bar to the bottom of the page. You can set both html and body at 100% height, and then with a negative top margin on the footer to be the same as the height of the footer iteslf.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Either I have misunderstood your second question, or Scott has. I thought you meant extending the height of the page, no?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 434929 Photo


Ambassador
938 posts

I think Henrik talking about sticky footer
When you view the page in full screen there is white space under footer, I think Henrik wants to expend vertical height and following script will do the job in latest browsers.

100vh = 100% vertical height
50vh = 50% vertical height

add this script to your footer div in CSS {
height:100vh;
}

but remember all latest browser should work for older browser you need different method or maybe java script.

there is another css trick have a look at this video
https://www.youtube.com/watch?v=FCDr0okbJaM
Guys at coffeecup are awesometacular.
User 2206099 Photo


Registered User
7 posts

I really appreciate the responses - thanks for helping out!

To my first question, I now realize based on your answers that I really had to make my changes to the right of the last break point, and that there is no easy way to now retrospectively copy the theme left of the last break point to the right...it is a bit of a painful realization :(. Maybe a future feature could be do be able to do just that, copy changes/sub-themes between the different break points. Another thing I have been really missing is a way to scroll to the right in the development window. If one is developing on a laptop with 1440px wide resolution but wants to add a break point at let's say 1920px I haven't found another way than to widen the actual Layout window, and then moving the whole Layout window little by little to the left, widening to the right as I go (does it make sense?). Maybe I just haven't found the horizontal scrollbar in the SW.

In regards to my second question I have already checked the "Max-width" for the last row, so no defined px. I looked at the "Sticky footer" video and that wasn't what I had in mind, but it looks pretty cool, so maybe I'll use that for later. But for now I just want to make sure that which ever screen resolution is used, full screen mode or not, there should never be any white under the last footer of 50px.

I tried the "height:100vh;" idea and it removed the white, but it kind of extended the footer as scrolling down on the page (see attached file) which looks a bit weird, or not, I am not sure. In addition I don't think I found the right element in the CSS file to add the code. The best matching part looked like this in the main.css, and that's where I added the proposed code:

body > .row > [class*='coffee-span-'].footer-bg-column {
background-color: #2a2c2b;
height:100vh;
}


I tried to add a similar part just replacing ".footer-bg-column" with ".footer-bg-row", but it didn't really work.

For now I took the idea of just extending the white space between the form and the footer, not perfect but okay for now. More importantly I need to fix the left-right theme break point issue.

Thanks again for you help, and you can see the result in jeanrik.com/contact-us.html.

Henrik
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.