I am new with CSS/Flexbox and have used a responsive template to build a basic site.
What i would like is, some scrolling images in which case Owl Carousel, looks to be great.
These images to automatically rescale when viewed on a web browser or mobile etc. I tried using Flexbox but got confused and wonder if someone could assist me so that the image would automatically resize no matter what the device is.
The image size would be approx 1900 x 840 but my attempts just had the image shrink when viewed on a mobile.
Should the other images resize too, as the one you talk about does? They are the same size the whole time it seems, only the ad image resize with the viewport.
If you are talking about the image that says ‘certified Macintosh tech’ then how can that fit on a 320px mobile screen without it shrinking very small?
The aspect ratio is still maintained so height and width scale smaller at the same time otherwise the image would be stretched in one direction or both. It’s a logic question rather than a programming method as an image must retain its width and height aspect ratio in order to be displayed correctly. You can’t just stretch it one way without maintaining aspect ratio otherwise it will look weird.
The slider is working how responsive sliders should work.
The other images on your page are small images around 300px wide and therefore don’t really need to be made smaller for mobile although on mobile they will take up more room than I would like.
You need to re-think your slider image as you have included text on the image and that is bad for many many reasons. The text should be in the form or real browser text overlaid onto the image and then you can change the size of the text as the window gets smaller. Most sliders allow for captions to be added to their image sliders. That would allow your actual image to have more room on the smaller screen rather than being squashed alongside the text that was part of the image.
If I’ve got the wrong end of the stick then please clarify what you would like to happen at smaller screens as I may have jumped in and made the wrong conclusions
Thanks guys interesting questions and points. Perhaps I was tackling the issue from the wrong end of the stick!
The image was uploaded by someone else, but I thought the width was ok… So in that case, how could I shrink the other images and leaving the banner intact? Or what dimension should the banner image be too make it look correct with the rest?
PaulOb - that is the correct image but could kindly remove or as I don’t want the number floating around. Thanks
@Erik_J@PaulOB just wanted to get some suggestions… Should I be attempting to adjust the size of the other images to make it look inline with the page banner or simply set the image dimension for the banner at 360px so it looks appropriate on a mobile and desktop etc?
I fully agree with Paul, both about the other images being a bit too large for really small screens and about the rethink of the slider image pulling the text out of it to make the (left part) image get the full width.
You have limited scope with the slider for small screens so some developers prefer to remove the slider completely on small screens and just have a static image and browser text. In most cases users ignore sliders anyway and find them too hard to interact with. Research shows that only the first slide gets interacted with anyway.
Mobile screens are short on space so if you can reduce the images a little it will save on exorbitant scrolling all the time just to get to the content.
Back again! I made some minor adjustments. I was curious to understand why there are limitations using a slider?
On the otherhand I placed a large image approx 2100 width and the height was and 2 inches more on a desktop screen (1900 resolution) but on a mobile it looked much better.
So it’s this the limitation? I would have removed the slider but that decision is outside of my hands.
Is there a way to adjust the image size on the desktop without affecting the mobile version? Thanks
