misaligned elements

gizmo_1979
13 Posts
gizmo_1979 posted this 19 September 2022

In my wordpress site I have a plugin on the home page, in the past it had created problems if it worked with a theme created with themler and in the past you had provided me with ccs code to correct it. A few days after the last wordpress update the problem has come back, I am attaching a screenshot:

enter image description here

The right arrow appears at the top instead of being aligned with the left one, and the left arrow partially covers the text.
the site is: https://www.sb-lab.eu/

In my wordpress site I have a plugin on the home page, in the past it had created problems if it worked with a theme created with themler and in the past you had provided me with ccs code to correct it. A few days after the last wordpress update the problem has come back, I am attaching a screenshot: ![enter image description here][1] [1]: https://i.imgur.com/g1V3hOj.jpg The right arrow appears at the top instead of being aligned with the left one, and the left arrow partially covers the text. the site is: https://www.sb-lab.eu/
Vote to pay developers attention to this features or issue.
3 Comments
Order By: Standard | Newest
abeljame1303
5 Posts
abeljame1303 posted this 14 September 2024

With tricky obstacles and fast-paced action, Run 3 Unblocked is in the middle of a space adventure, perfect for players of all ages and skill levels.

With tricky obstacles and fast-paced action, [Run 3 Unblocked][1] is in the middle of a space adventure, perfect for players of all ages and skill levels. [1]: https://run3free.github.io
jerry4422cherry
1 Posts
jerry4422cherry posted this 14 September 2024

CSS issue that might have been introduced or reverted after a recent WordPress update. I can help you troubleshoot and resolve this issue. However, I can't directly view the screenshot or the website, so I'll guide you through some general steps and CSS code that you can use to address the problem.

Inspect the Elements: Use your browser’s developer tools (right-click on the page and select "Inspect" or "Inspect Element") to identify the classes or IDs associated with the arrows and text. This will help you pinpoint the exact CSS rules you need to adjust.

Check the CSS Code: Based on common issues, you might need to adjust the positioning or z-index of the arrows. Here’s a general approach:
/* Example CSS to fix arrow positioning /
.plugin-arrow {
position: relative; /
Adjust positioning context /
z-index: 10; /
Ensure it’s above other elements */
}

.left-arrow {
position: absolute;
left: 10px; /* Adjust according to your layout /
top: 50%; /
Align vertically if needed /
transform: translateY(-50%); /
Center vertically */
}

.right-arrow {
position: absolute;
right: 10px; /* Adjust according to your layout /
top: 50%; /
Align vertically if needed /
transform: translateY(-50%); /
Center vertically */
}

.plugin-text {
position: relative; /* Ensure it’s above other elements /
z-index: 5; /
Lower than arrows to avoid overlap */
}
Adjust the class names and CSS properties based on your specific case.

Add Custom CSS: You can add custom CSS in WordPress via:

Customizer: Go to Appearance > Customize > Additional CSS and add your CSS code there.
Child Theme: If you're using a child theme, add the CSS to the child theme's stylesheet.
Clear Cache: After making changes, clear your site’s cache (if you’re using a caching plugin) and your browser’s cache to ensure you see the updated styles.

Test Responsiveness: Make sure your changes look good on different screen sizes. Sometimes issues might be related to responsiveness and need adjustments for mobile devices.

Consult Plugin and Theme Documentation: If the issue persists, check the documentation for the plugin and theme. There might be specific instructions or known issues related to compatibility with updates.

CSS issue that might have been introduced or reverted after a recent WordPress update. I can help you troubleshoot and resolve this issue. However, I can't directly view the screenshot or the website, so I'll guide you through some general steps and CSS code that you can use to address the problem. Inspect the Elements: Use your browser’s developer tools (right-click on the page and select "Inspect" or "Inspect Element") to identify the classes or IDs associated with the arrows and text. This will help you pinpoint the exact CSS rules you need to adjust. Check the CSS Code: Based on common issues, you might need to adjust the positioning or z-index of the arrows. Here’s a general approach: /* Example CSS to fix arrow positioning */ .plugin-arrow { position: relative; /* Adjust positioning context */ z-index: 10; /* Ensure it’s above other elements */ } .left-arrow { position: absolute; left: 10px; /* Adjust according to your layout */ top: 50%; /* Align vertically if needed */ transform: translateY(-50%); /* Center vertically */ } .right-arrow { position: absolute; right: 10px; /* Adjust according to your layout */ top: 50%; /* Align vertically if needed */ transform: translateY(-50%); /* Center vertically */ } .plugin-text { position: relative; /* Ensure it’s above other elements */ z-index: 5; /* Lower than arrows to avoid overlap */ } Adjust the class names and CSS properties based on your specific case. Add Custom CSS: You can add custom CSS in WordPress via: Customizer: Go to Appearance > Customize > Additional CSS and add your CSS code there. Child Theme: If you're using a child theme, add the CSS to the child theme's stylesheet. Clear Cache: After making changes, clear your site’s cache (if you’re using a caching plugin) and your browser’s cache to ensure you see the updated styles. Test Responsiveness: Make sure your changes look good on different screen sizes. Sometimes issues might be related to responsiveness and need adjustments for mobile devices. Consult Plugin and Theme Documentation: If the issue persists, check the documentation for the plugin and theme. There might be specific instructions or known issues related to compatibility with updates.
gizmo_1979
13 Posts
gizmo_1979 posted this 14 September 2024

2 years have passed and I completely changed the plugin to solve the problem

2 years have passed and I completely changed the plugin to solve the problem
You must log in or register to leave comments