-
Posts
-
Hi Rikard,
************************************************************************************************************************************************888
About 8 months ago I reported a problem as follows:I have a page of 25+ photos … I place them on the page in rows of five across 1/5 containers. In each container, I use a text block so I can load each photo with a description below it. Each photo is exactly 960 x 720 px.
The photos and 1/5’s look great in the editor. But when they are displayed on the page random photos are not aligned but usally a few px lower than others on the same row.
I’ve changed photos of the 1/5’s off line. I’ve remade the 1/5 from scratch. Nothing seems to fix it.
To see the problem .. go to http://www.embroiderforyou.biz. Half way down the home page is a big button to DISPLAY FABRICS … that will bring up the page in question.
Any Ideas?
You Responded:a solution that worked fine
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
.av_one_fifth .aligncenter {
padding: 0;
}
Best regards,
Rikard
**************************************************************************************************************************************8
I am now working on a revision of my web site in a staging area and the problem has returned even though the code still appears in the Quick CSS.(See Photo alignment on the home page)
Can you help please?
Alan
Hey ImaPappy,
Can you please share credentials too? We cannot see the post on the link that you shared.
Best regards,
VictoriaVictoria,
I also wanted to mention … note that, on the home page, when you move the cursor over some of the photos, they move … see “adult bibs”, “masks” and “nanu scarves”..
Alan
You are looking at the wrong page … look at the home page of my staging (test) area not my live area (URL was sent earlier)
I’m a noob so forgive this question .. I made a screenshot showing the problem .. how do I send it to you in this messaging format ?
Alan
Hi ImaPappy,
We cannot see the screenshot. You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.
Best regards,
VictoriaMy Dear Victoria …
You should not need a screenshot to see this.
For you to see this issue, it should not be difficult at all. Please follow my directions below.
1. Open my test site … see below (you shouldn’t need credentials to do this but if you do they were posted earlier)
2. On the home page there are 15 1/5’s with photos in them
3. Look at the first row and notice the the third 1/5 is not aligned evenly. Other rows exhibit the same issue.
4. Put your cursor on the first photo in the first row and notice how the photo moves.when you touch it.
These are the issues. Please help.If you DO NOT see this same problem, send me a screenshot and I will be convinced it is something on my end.
Have a Nice Day ,,,
Alan
We are making progress Victoria …
I looked at the development page for HOME. I believe there is no white space anywhere in the first row yet first photo is still out of alignment and the size of the photo seem to be correct with no white space.
The creds are repeated below …please look at HOME in development mode.
As I specified in the first post of this thread, this very same problem occurred in my live page several months ago. CSS code (also show in the first post) was needed to correct it.
Alan
Hi ImaPappy,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
body .aligncenter, .entry-content-wrapper a:hover .aligncenter { margin: 0; padding: 0; }The thing is, you have different tags there, some are h3, some have h3 + a and some text clock + p. Please try making them uniform and see if the images align well.
If you need further assistance please let us know.
Best regards,
Victoria“… some have h3 + a and some text clock + p”
I don’t know what this is …. can you be more specific on where you found this?
When I change text to be H3 I just highlight and select it. I don’t know what a text clock is or how I get a H3+a or H3+p encoded..Alan
Hi ImaPappy,
Here looks like just an image but if you click on the text tab you can see the extra HTML markup that should not be there.
You can simply remove it.
Best regards,
VictoriaHi Victoria,
I got all the photos lines up on all my pages except one and I cannot figure this one out. Most I solved by completely deleting the 1/5 in which they were contained and rebuilding it .. that seemed to fix the problem.
However .. please look at the home page … second row down and last one on right (SCARVES). I checked the photo multiple times and it is correct in size and resolution. I deleted and rebuilt the 1/5 several times and no matter what I do, I cannot get this photo aligned to the others.
Can you help?
BTW .. having to rebuild those random 1/5’s which are misaligned to fix the problem seems to me to indicate a random bug in Enfold. Just my intuition speaking.
But can you help with that one stubborn photo I indicated above.
Thanks.
Alan
Hi Alan,
I’m very sorry for the late reply. The difference between the scarf block and the other blocks, seems to be that the image is wrapped in an h3 tag in the other blocks.
Mittens:
<h3 style="text-align: center;"><a href="http://g3u.db4.myftpupload.com/mittens/"><img class="alignnone size-medium wp-image-2058" src="https://g3u.db4.myftpupload.com/wp-content/uploads/2021/02/Lilac-300x225.jpg" alt="" width="300" height="225" /></a></h3> <h3 style="text-align: center;"><span style="color: #3366ff;">Mittens</span></h3>Scarves:
<img class="alignnone size-medium wp-image-2315 aligncenter" src="https://g3u.db4.myftpupload.com/wp-content/uploads/2021/02/SC-06ls-1-300x225.png" alt="" width="300" height="225" /> <h3 style="text-align: center;"><span style="color: #3366ff;">Scarves</span></h3>If the image is not wrapped in a header, then it will automatically add a paragraph. We can try to give you custom CSS for that, but it’s likely better if you simply kept the same html structure in all of your blocks.
Best regards,
RikardThank You Rikard …
I don’t know how the other pics are wrapped in an h3 but making it also an h3 corrected the problem.
I will keep this in mind for other similar issues by comparing the text representatons.Alan
- You must be logged in to reply to this topic.