Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

Edited by jordanpowers
Link to post
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Ishimoto is a good template, and this is a very strange effect. Do you have some kind of code, any unusual animation you are using? Is the blank space a slide show or grid? In other words how is the image block designed? It seems like your images have a white overlay which hides it but you see it in the lightbox. 

Edited by derricksrandomviews
Link to post
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...