Sizing for Mobile/Bit of .html Jiggling Required

Informal
1

Hi All,

So I’ve just started work on a new site, which will be the company I work for’s website for our new branch in the USA (we’re a UK company).

One issue I have right now is an image sizing problem for the main header/logo/banner image at the top of the page.

Initially it was fine on a normal web browser, however would overshoot the edges of a mobile browser when in portrait mode.

So I dropped the following line into it:

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

This took care of the mobile issue to an extent, but now I have two problems, in a normal web browser it stretches the image slightly, and on a mobile browser is squishes it.

To be expected really, however clearly I need a couple of extra lines that say something along the lines of maintain ratio of image dimensions when scaling…does anyone have any idea how to write that?

2

It looks like you were going to put code here, but we don’t see it.

Can’t you just use CSS media queries, that way you can have the image show up one way on a desktop and a different way on a mobile browser?

3

Add this css to to the image (it will prevent image malformation):

img {
  object-fit: cover;
}
4

Strange my code didnt show up I can see it on my end.

Anyway thanks for the help guys!

So I found something strange in ExpressionWeb4 when I was playing around with sizing, turns out images can be scaled by either percentage or pixel for both height and width separately. For whatever reason one was set to percentage and one was set to pixels. When I locked them both in to the same scaling system it seems to have corrected it : )

2 Likes
5

Awesome! Glad you were able to fix it.

1 Like
6

You can use @media tag like so:

@media only screen and (<property>: <attribute>) {
 element {
    
 }
}

e.g.

@media only screen and (max-width: 640px) { /* If the screen is <=640 pixels in width */
 .myclass {
  width: 100px;
 }
}
2 Likes
7

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