Website displays differently using http and https

HTML & CSS
1

I’ve never encountered anything like this before, but when I view my website using http (unsecure) vs https(secure) it changes the layout of website.

Website url:
http://consolidatedgypsum.ca - displaying correctly
https://consolidatedgypsum.ca - not displaying incorrectly

When using http, my website looks like it should. Image below:

1277×1077 994 KB

When using https, it adds a lot of extra white space between my large navigational area in the index page. image below.

1208×1879 997 KB

I don’t understand why this happening, as I’ve never encountered this before, I’m really hoping someone can shed some light on this.

2

I don’t see a lot of difference. Both have the white gaps inbetween rows. The only thing is the hhtps version does not have the social icons on the left.

3

It does, it might just be hidden (you can hide it).

I know they both have white space, but https, show a substantially more ( a lot more) white space.

4

Your first screenshot shows just a little space. I see a wide space like your second screenshot on both.

5

I don’t see any difference between the http and the https versions using a chrome/opera variant.

1 Like
6

I don’t see any difference using chrome Version 49.0.2623.87 m.

Are you talking a specific window size? Or are you seeing it at any window size?

7

Now I see it on both, what’s weird, is that it never did this before when I had it as a subdomain or when I was viewing it locally.I’m wondering if my CSS maybe didn’t transfer over properly.

8

I fixed my problem. It was a CSS issue, for some reason using:

height:100%; was giving it a huge amount of white space
while height:auto; fixed my problem.

I found it a bit strange, considering when I built the site locally the height:100% never affected the site this way.

9

Setting heights, particularly with % is a strange thing. Best avoided in most cases.

10

Hi, lauren_olsen17.

It is a common misunderstanding to assume that {height:100%} will cause a box to extend to the height of the parent container. Usually it does not. Percent heights, as well as vertical padding and margins in percent, are based on the width of the parent container.

I did not see which element had the height of 100%, but a quick glance at your code suggests that it was
main.css (line 5501).

If you would like to try something “educational”, temporarily make the changes indicated below. Then drag the width of your browser window between wide and narrow and watch the height of the individual boxes. You will note that the space between the rows of boxes is not changing. Instead, the height of the boxes themselves is changing in harmony with the width of the window.

main section .wrapper .col-15 .idx-nav-container .idx-nav-box {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 100%;  /* changed from "auto" *//* actually a height assignment is not needed */
    vertical-align: top;
    margin: 1em auto 2em;
    outline: 2px solid magenta;  /* TEST Outline; TO BE Deleted after testing. */
}

As I said, relatively new coders assume that if {width:100%} causes an element to extend to the full width of the parent container, then {height:100%} work similarly in the vertical direction, too. Unfortunately the rules are not the same. There are exceptions, but this use case is not one of them.

And just to add insult to injury, many times those same coders are applying {width:100%} to default block elements unnecessarily, too.

If you followed this exercise be sure to restore your previous styles with the caveat that no height actually needs to be applied to these boxes.

Cheers

11

Hi, I agree with you too! What is the diffarance?

12

It’s seams that “https” is incorrect in using?

13

I faced the same problem a few months ago with my website.
You will find i have removed the SSL now, this is due to some other reason. Kindly tell me on what technology your website is on. i will be able to help you here i suppose.

14

@LindyBrouy and @OmegaWEBOZ it appears that that the OP has solved their problem already.

2 Likes
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.