How to prevent Jekyll from auto-resizing my website


#1

I changed my default minima theme in variety of ways, among others, including fixed margins for my entire homepage, including heading, but leaving media-query for @palm definition to remove these margins so that website would be convenient for mobile

However, I noticed one problem, and that is the fact that whenever i resize my browser window, the size of the header and content and everything else fluctuate, which looks really bad on websites which have margins all over, since when i reduce the size of my browser window to something smaller, I’m left with a puny looking website

What I want to achieve is having only 2 sizes for my website, one for desktop/laptop, and the other for mobile, without my desktop variant fluctuating on browser window change. NO amount of changing of any variables in any of the sass files helped. I tried removing all relative parameters, everything that is related to calculating margin or sizes or anything similar to the point of obliterating my website, but any remaining elements would still flucuate in size as the size of the window changes.

Is there anything I’m missing ?


#2

to be clear, jekyll isn’t doing this, it is the css that controls it.

It sounds more like you want a fixed width rather than margins - the content is sometimes kept in a class called container.

As for just having 2 sizes, usually that is handled by the media queries, but 2 is not very many, usually there are 3-4 or more to cover the small phones, large phones, ipad and desktop.

There is nothing stopping you from starting from scratch and doing whatever you want, though it is a fair amount of work. There are a couple of excellent youtube series on this type of thing, I managed to create my own css that does what I want fairly easily.

here is a link to some css I wrote - this is just the sass partial that handles the container stuff, look at the media queries and see how the container width changes based on the width of the screen:


#3

Rydar, thank you for your response.

I guess I needed to take a rest from poncing around text files, because I missed the most obvious solution
width: 1200px;
margin: auto;

and then media-query for other devices. this prevented browser from shrinking the website

I only need to remove width on palm media query to allow it to resize website for different mobile devices.
Although, with fixed width, text size and other elements won’t adjust anymore, but I’m fine with that approach for desktop browsing.