1

I want my site to stop resizing (stop being responsive and lock at the desired size) after user minimizes it to a certain point lets say 10inch screen in pixels and when u scroll left of right it is not responsive after that point.

I have tried

body {
    min-height:30%;
    min-width:30%;
}

But nothing happens at all.

Philip Scriver
  • 31
  • 6
  • percentage of what? i call user `min-height:30vh` instead of `min-height:30%` same goes for `min-width:30vw` for `min-width:30%`. But if you want to use `%` you then have to set the width and height of the parent element `:root{width: 100vw; height: 100vh}` – Gildas.Tambo Oct 06 '19 at 13:42

2 Answers2

1

percentage

The percentage CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

use min-height:30vh instead of min-height:30% same goes for min-width:30vw for min-width:30%. But if you want to use % you then have to set the width and height of the parent element 

:root{width: 100vw; height: 100vh}

or 

html{width: 100vw; height: 100vh}
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
0

you are looking for media query my friend. check this out:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

you'll use a media query to specify the pixel size (and other options) for example 600px max width is a good measurement for phones. inside the query, you'll write regular CSS to apply under those size conditions.

let me know if you need samples, i'll send you some of my code to help.

here is another good post on stack

Media Queries: How to target desktop, tablet and mobile?

sao
  • 1,835
  • 6
  • 21
  • 40