Jump to content

My blog content somehow became incredibly spaced out?

Recommended Posts

Site URL: https://jordanpowersphotography.com/blog

For some reason, my blog content is distorted. The space between the text and image content is extreme. In some cases, the images that I have in there aren't even showing up - but if you click on the empty space, they populate. Not sure how or why this happened. Any help would be appreciated. I apologize I am not sure how to best word what is happening so you may just have to look: https://jordanpowersphotography.com/blog

Link to comment
  • Replies 2
  • Views 359
  • Created
  • Last Reply
2 hours ago, derricksrandomviews said:

Do you have some kind of code

That appears to be the issue. A CSS issue.

I suggest removing all custom CSS code dealing with gallery images. Save a copy in a file if you want to bring it back. In the short term your images should repair.

Let us know how it goes.

What was the goal of this CSS? If we know what it was, we may be able to suggest a better approach.

Following is some analysis for this issue.

Here is what I found. I used my browser inspector to take a look at the gigantic white spaces. Some are galleries in a grid layout. I discovered that the image elements have a width and height of 0 (the center 0x0 is the w/h). Hence the reason the images don't display.

644336631_ScreenShot2020-09-04at5_47_36PM.thumb.png.c5e6c1ee7e9c0b35bd3cde6042f3f32f.png

Not good. Let's take a look at the CSS for that img element.

1205316568_ScreenShot2020-09-04at5_48_12PM.png.8b825db5f60cb64334920e8c0b710eb3.png

The first thing we see is that a whole bunch of rules are crossed out. Not good. The gallery is sized/resize by JavaScript code that dynamically resizes each image based on the size of the browser window. That code is working but something is overriding what the code is doing to make things work properly.

Lets scroll down the style rules to see if we can find a problem.

737232718_ScreenShot2020-09-04at6_02_21PM.png.dd1e20f8bbe4fbd02ab9f157611462e1.png

Ah ha! There is some rules that are overriding the img elements style attribute because of the use of !important declarations. Most importantly the height and width of the img. When I turned off those rules the images were visible again.

1877571279_ScreenShot2020-09-04at6_18_46PM.png.6cb937e4311c30d7abe8a59af83f7d14.png

500555284_ScreenShot2020-09-04at6_32_16PM.png.daee2cdf7568a67b4cb6961ad35b2502.png

At this point it looks like we've found the main issue. It appears that some custom CSS was added to the site that is causing an issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.