timjphoto

It also might be worth me mentioning that when the device is rotated some, but not all, of the images become sharp again!
 

Hi, 
I'm having some issues on my mobile site. Some images on my homepage have become blurry, they were not like this when uploaded and images that have been more recently uploaded appear fine. All images look fine on the desktop site, it's only on the mobile site. I have deleted and re-uploaded the files but I'm still having the same problem. I am using custom CSS on the site but I'm not sure why this would have started effecting images now, and only be effecting certain images.
Any help and advise on this would be greatly appreciated.
Thanks, 
Tim.
 
www.timjobling.co.uk

Yes, the page is centered with "auto" margins left and right, which means that they will be balanced and even and centered. Your previous method was fighting against this, rather than fixing it, which is why there was a few problems.

This sounds rather unusual, I believe this is a something with the Wexley aligning the page to the left. To do the the page margin is set to 0px on the left. The better way to center align your pages (without changing to another template) is to target the #page rather than #canvas and "fix" the margin like this:
#page { margin: 20px auto; } Hope that helps!

@creedon That works perfectly, thank you very much!

@timjphoto
This is where you add in other url slugs you want to exclude from the effect.
So the bit in the code that looks like...
        // '[enter url slug here between single quotes]',                  'about-1',         'news',                  ];          ...becomes...
        // '[enter url slug here between single quotes]',                  'about-1',         'news',         'tim-jobling-photography',                  ];          I assume tim-jobling-photography is the slug for your blog.
Let us know how it goes.

@timjphoto
Add the following to Settings > Advanced > Code Injection > HEADER.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add header navigation projects link active on "project" pages to Settings > Advanced > Code Injection > FOOTER.
Let us know how it goes.

Hi. CSS can't solve this problem
If you use a Business Plan or higher, let me know, we will try some JavaScript code

Squarespace has a click event that allows users to navigate between images by clicking on the left or right of the lightboxed image to move backwards or forwards through the gallery. Because of this, they don't allow users to click outside the image to close the lightbox.
A workaround may be to reposition the close button so that it is not hidden by the header:

You could do this with some CSS like this, adjusting the values to meet your needs:
.collection-type-gallery #backToThumbs { top: 134px; right: 44px; } Did this help? Please give feedback by clicking an icon below  ⬇️

@tuanphan I'v got the code working, I still had my pervious code in there which was preventing yours from working. Many thanks again for all your help.

No the code wouldn't work for your site. In addition the code was pretty easy to implement because the pages of interest were under the /magazine area of the site. That made it easy to add the css to make the effect happen.
Your projects are at the top level of the site so a different method would be required to achieve a similar effect. Either explicitly adding each url to the code so it knows what URLs are projects. Something like...
const urls = [ '/hessia-studio', '/carter-road-skatepark', etc... ]; Alternately if your projects are always going to be at the top level and you only have a few other non-project top level pages, it may be easier to always apply the effect except when on certain pages.
const urlsExclude = [   '/news',   '/about-1',      etc...      ]; So there are a couple of options.
Change your project URLs to be something like /projects/hessia-studio. Then it would be pretty easy to alter the above code to work for your site. It would also basic be self maintaining as long as you keep the same URL structure. You'd want to consider the effect that change may have on your search rankings. There are ways to mitigate that issue but that is another topic.
The second is basically what I described about including or excluding the effect based on specific page. That code would need to be updated every time you made a URL change or added or deleted pages.
Which method do you think would work for your needs?
The above code snippets are not to be installed. They are pseudo code.

Do you think explicitly telling the code which pages are projects or telling it what pages are not projects would work better for you? In many cases I would think the later approach would mean less contact ( having to edit it ) with the code.
There is risk of course with any changes to well established URLs within a site in relation to search engines. But as I mentioned those risks can be reduced by using SS's built-in URL redirects feature.

Have you tried adding the code yet? I just tested the code again & It should work
If it still doesn't work, add & keep the code, we can check easier
div#socialLinks:hover .sqs-use--icon { fill: rgba(0,0,0,1) !important; } div#socialLinks a:hover .sqs-use--icon { fill: #00ffea !important; }  

Use this new code
@media only screen and (max-width: 800px){ #header #topNav { display: block; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); width: 100% !important; right: unset !important; float: none !important; text-align: center; display: flex; justify-content: center; } }  

Can you remove the code & add item 3? We will try checking easier
 

You mean all images on homepage?

It seems fine at the moment

Hi,
I worked it out in the end, I had my images set to ‘inline’, as soon as I changed them to ‘stacked’ the option to link the images appeared. 
Thanks. 

Worked it out! I had the image design set to inline instead of poster, I changed it and the link option appeared 🤦‍♂️

I seem to have solved it using this code:
 @media only screen and (max-width: 800px){   #header #topNav {     display: block;     position: absolute;     top: 80%;   left: 50%;   transform:translate(-50%,-50%)      } } #mobileMenuLink {    display: none !important; } It seems to work fine, I'm certainly no code expert so if there is a more effective way I'd love to hear.

This code hides you buttons on mobile. You can try the following one to overwrite it
@media only screen and (max-width: 800px){ #header #topNav { display: block; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you