Hi,
I am creating a website:
https://adam-crofts-bgak.squarespace.com
I am having trouble with some of the images when viewed on a mobile.
For instance, the images of the truck on the about me page doesn’t scale down to the correct place as in the desktop version.
Any ideas of how i can fix this? Thanks
Which truck image? I’m looking at the big one parked on the grass. That one scales.
I’m not seeing any weird scaling.
Sorry, the blue graphic one
Anyone got some CSS that would get this working correctly?
Man, squarespace makes some pretty God awful code to look through.
Remove width:100% on “#block-yui_3_17_2_12_1431965440149_11947”
Hi Ryan,
I dont think that fixes it. I want them to look like there going off the screen as in the desktop version in the same position. For instance the top image is hidden behind the quote on the about page and on the contact page the image doesnt end up in the right place at all 
any ideas?
Your site induces scrollbars at almost every width. Get your website to be responsive first.
Although you can now make htat margin-left:100px, into margin-right:-100px (in addition to my above suggestion.) Now it’ll scale down, and still be slightly off screen.
All in all, with that truck going off screen, it’s causing scrollbars. Not sure why you want that, but that’s not my place…
‘Your site induces scrollbars at almost every width. Get your website to be responsive first.’ Thanks, how do I do this? I’m no expert on websites, that’s why I chose a simple square space template. Everything was ok until I realised it looked rubbish on a mobile. Is this an easy fix?
';
I’m not sure. I’d talk to squarespace and see if they offer any ability to make their templates responsive. Or if they have responsive templates. WEbsites like that, that let beginners / non-coders get websites, generally make pretty poor templates. The people don’t know any better.
Unfortunately, no. You need to talk to squarespace about what they have that is responsive.
This issue might be an easy fix, but every 30 minutes you’ll be coming back here with another responsive-based issue caused by just a bad template.
I know back in 1998 I had AOL Hometown and GeoCities sites.
At the time they were good enough for letting me send a link in an email to my friends with something like “See my cool pictures”.
But as I learned more I realized the mark-up was horrid.
ac1986, If you are wanting more than a “for my friends” website you are at the threshold, if you want better my suggestion is to install a localhost to your computer, put together a site to your liking, then buy a domain and host server and FTP your site to it.
Fair enough. Yeah, I just need a site at the moment that serves its purpose as a blog, nothing too fancy . Would be good just to get the images fixed now so that they all work and then I can leave pretty much leave it. Then always host joomla or something at a later date.
I’d look into Wordpress, if you’re interested in a blog. That would be a lot easier to get responsive, as they have pre-made responsive templates, and a CMS to boot.
thanks, I will definitely move over to wordpress as soon as I can .
I just need to get the site working ASAP before I move over.
It would be great to get a couple of quick fixes that will look ok in the meantime. Anyone?
Just need some code that will get it looking ‘OK’ until I can move over to another platform…
As Ryan indicated that element is the main problem element because it sticks out of the side and induces a horizontal scrollbar. When mobile sites view the page they see that there is a great big image sticking out of the page and scale the page until the image fits inside the mobile viewport resulting in the rest of the page being squashed.
For mobiles you never want a scrollbar on the viewport or they will just get confused.
I would let the image stick out on wide screens and then in your media queries resize it smaller and move it inside the layout for smaller screens.
Having anything other than a background image sticking out the side of the main page content is a bad design move.
Thank-you Paul. That is a great help, as I didn’t fully understand before!
I guess everyone’s got to learn sometime! 
What is the best way to Media querie mobiles? can you give me some example CSS that I could use? Thanks again!
To make your image scale down nicely in a mobile version, make it responsive using bootstrap. Download bootstrap from github and add that css to your html. Then, inside your image tag , add “class=“img-responsive””.
The first rule of fight club is The first rule of mobiles is: “You do not talk about mobiles”. The best way to handle mobiles is to forget about mobiles altogether and concentrate on your design. 
Just ensure that at no point a horizontal scrollbar appears from 320px to very large (i.e. when you open the viewport window and close it).
While you are opening and closing your window look at your design and if at any point it looks awkward or doesn’t fit nicely then that is the point that you would apply a media query and fix the design to look better. With a few well chosen media queries and a consistent design approach you cater for all devices for all time (within reason) without needing to know anything about them.
Thanks! I think I have managed to make it work…OK
Can anyone let me know if they still pickup anything strange on mobile device/ other browsers… Thanks!
I’m still seeing the image poking out to the side.
A quick fix would be to hide the overflow on the main 100% wrapper.
#siteWrapper{overflow:hidden}
That will ensure that as the window gets smaller anything sticking out will be ignored.
It is still generally best though to address the issue of things poking out rather than hiding the problem with overflow.