HTML & CSS Please help a graphic designer who knows nothing about code with her Cargo site

[Sarah M.]

Problem: On my cargo site (which isn't live yet) images enlarge infinitely when browser grows. How do I put a max size on them? It's to show off a mobile app and it looks bad when it becomes giant.

I've tried this:

.mobile {
max-height: 800px;
}

It works on desktop, but on mobile it won't shrink properly.

Thanks!

 

[Antero360]

Problem: On my cargo site (which isn't live yet) images enlarge infinitely when browser grows. How do I put a max size on them? It's to show off a mobile app and it looks bad when it becomes giant.

I've tried this:

.mobile {
max-height: 800px;
}

It works on desktop, but on mobile it won't shrink properly.

Thanks!

Hey there
You can add what we call a media-query to your css. The purpose of the media-query is to tell the browser how to render things when the screen reaches a certain width.

in your example, you can do something like this:
@media screen and (min-width: 600px)
{
.mobile{ height: 800px;}
}


This tells the browser that whenever the screen width is 600px and higher, to set the height of anything with the class of 'mobile' to 800px

Here is a good resource for you

CSS Media Queries

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Johna]

Problem: On my cargo site (which isn't live yet) images enlarge infinitely when browser grows. How do I put a max size on them? It's to show off a mobile app and it looks bad when it becomes giant.

I've tried this:

.mobile {
max-height: 800px;
}

It works on desktop, but on mobile it won't shrink properly.

Thanks!

Try using % instead of px. For example:

.mobile {
  max-height: 100%;
}

This image will be 100% the height of it's parent element. If you want it to be 100% the height of the total webpage use vh like this:

.mobile {
  max-height: 100vh;
}

For this I would recommend setting the maximum size of the image according to the width of the website, so that if your website is long (has a lot of scrolling down), the image would still fit in the screen without having to scroll sideways. If you're going to do this, then use vw instead of vh:

.mobile {
  max-width: 100vw;
}

More on this here:

CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained

Many CSS properties like width, margin, padding, and font-size take a length, and CSS has many different ways to express length. In CSS, length is a number an a unit with no whitespace. For example, 5px, 0.9em , and so on. There are two general kinds of units used for

www.freecodecamp.org

Btw if you don't know any coding, there are some good website builders out there like wix, and many more. Unless you specifically want to code it yourself.



Edit: vh might actually be the height of the screen and not the webpage, I'm not too sure.