Position and size different images in a gallery website

HTML & CSS
22

Whoops :slight_smile:

# Website blocked due to a suspicious top level domain (TLD)

Website blocked: alibaba-test.tk

#### Malwarebytes Browser Guard blocked this website because it may contain scam activity.

### We strongly recommend you do not continue
23

I have used the TLD for quite a few years without any warnings.

Did you try in a different browser?

Did you try the Google Mobile Test link?

24

Clickable elements too close together

There is nothing clickable in my code there, so it wasn’t anything I did. :shifty:

1 Like
25

There’s something about it that Malware Bytes doesn’t like. I always trust Malware Bytes and would avoid visiting the link unless I knew it was safe.

It’s probably a false positive thing but not really within my area of expertise. :slight_smile:

26

Hi Sam, John, Very much appreciate all the time you’ve spent on this.
I have the following css:

    .box {
   width:90%;
   margin:auto;
   display: flex;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
}
.box img {
   display: block;
   width: 90%;
   min-width:100px;
      max-width: 100vw;
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
img {
	     box-shadow: 10px 10px 7px -3px rgba(150,147,150,1);
	 }
}

I have a separate page for each image.
On mobile the full image is within view frame, including images that are over 1000px wide, but on laptop and desktop images with width over 1000px display actual size, so can’t be viewed without scrolling.
Is there a solution for this.
Thanks for any help
Sam going to try your Code pen

27

Hi Sam, your code works perfectly, no media queries, no breakpoints, no need to specify size or positioning - what more could I wish for.
Thanks

3 Likes
28

The actual images were used from your site and I showed four image sizes ranging from a thumbnail to the largest of about 1000px. All images are responsive, with their actual width and height set and the following CSS:

img  {max-width: 88%; height:auto;}

The images are inside a <p></p> parent so the background colour is identical.

The remaining CSS is only cosmetic and not required in order to fulfill Google’s Stringent Mobile Test.

CSS

body {background-color: #CFB789;}
img,
div  {border-radius: 0.88em;}
img  {max-width: 88%; height:auto;}
.mga {margin: 2em auto;}
.tac {text-align: center;} .tal {text-align: left;} 
.w88 {width: 88%; max-width: 1024px;}
.wrp {background-color: #fffbbf; margin: 4.2em;}
29

Google Mobile Friendly trusts the page as can be seen from the following screedump:


image
image1536×2048 226 KB


image
image1536×2048 220 KB

30

Hi rambleon
Please use only width in % for mobile responsive. Don’t use width in pixel because in % width automatically adjust in mobile
For example
.image{
width:100%;
margin:0 auto;
display:block;
}
Thanks

31

Yes that’s as maybe but visitors who have malwarebytes or other virus software installed will get the message and won’t visit. It’s probably something you should investigate.

Also I wouldn’t call that mobile friendly as I can’t read it at all on my mobile :). There is more to being mobile friendly than just what google thinks but we are getting off topic now :wink:

3 Likes
32

Hi qservicesinc,

I might agree in some cases, your example code is a very general advice. :slightly_smiling_face:

Though I can’t see to which of rambleon’s posts you are referring. :wink:

1 Like
33

Hi, Thanks for this, I assume that if you keep the same layout this would make images responsive on all devices not just mobile.

1 Like
34

Beware with just setting the image CSS values without also hardcoding the actual integer image width and height - without the trailing px… Because thumbnails will expand to the full width of the container.

This is the reason I added a thumbnail in my demo page.

35

The latest version of my codepen deals with this by constraining height with vh (viewport height) units, with some input from @Erik_J

This is the idea of fluid design, avoid rigid rules and you will not need breakpoints.
It is likely you will need them at some point for some page elements, but keeping things as fluid as possible will minimise the need.
Generally, if you are adding a lot of breakpoints, it’s a sign you are doing something wrong.

The trick is to stop thinking about individual devices, but acknowlege that a screen can be absolutely any size (within realistic bounds).

2 Likes
36

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