Home › Forums › Pro Support › Container formatting totally off
- This topic has 5 replies, 2 voices, and was last updated 3 years, 5 months ago by
Tom.
-
AuthorPosts
-
April 10, 2020 at 5:47 am #14644
Reza
ParticipantHi,
I am using WP Show Post with the latest GeneratePress theme. I have tried different formats and sizes, in all cases the posts do not fit in the content area and the rows overlap vertically.
The posts seem to have a transparent background with a blurry border and are around 30-40 px off to the left and overlap the any element above them by 30-40px too. I have the latest WordPress version installed and am working on a localhost.
I also tried deleting the plugins and the theme and started all over but the problem prevails.
Any help will be much appreciated.
Thanks
April 10, 2020 at 5:35 pm #14656Tom
KeymasterHi there,
This will be a tough one to debug without seeing the site. Any chance you can put it up on a test server so I can take a closer look?
April 13, 2020 at 7:21 am #14705Reza
ParticipantHi Tom,
I had added the following CSS that caused some problems
.post{box-shadow:rgba(23, 43, 99, .14) 0 7px 28px !important;
margin-top: -40px;}
In combination with the code provided on this page https://www.wplogout.com/display-related-posts-in-generatepress-theme/, everything got really messed up. After removing them everything seems okay.Could you please give me some guidance on how to customize the single post template, and if possible the lists generated with wpsp. I’d like to customize the text elements like Author, date, taxonomy, previous and next post navigation, and maybe add a drop shadow or border here and there.
I am using GeneratePress premium, Generateblocks and WP Show Posts Pro Beta2, I would like to avoid using any other plugins for layout and design.
Thanks for your time.
April 13, 2020 at 6:08 pm #14726Tom
KeymasterHi there,
I would need more specifics about what exactly looked messed up/what exactly you want to add a shadow to etc..
Do you have any screenshots of what it looked like with the code?
April 15, 2020 at 3:41 am #14779Reza
ParticipantHi,
– Here are the before and after images
I have removed the elements related to the following code so it is not effecting anything but it did when the elements were active.
/* styling related posts */*
.wpsp-related-posts1 {
background-color: #fff;
padding: 10px 10px 10px 10px;
margin-top: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}I am still working on the design, I will get back with any customizing questions in a new thread.
Just a few questions on best practices:
– How does the image size work and is it better to use it for site speed? Does it effect the size of the images chosen from the media folder or does it just use CSS to change the image size? I would like to remove unnecessary image sizes from my media library.
– For easier formatting, in GenerateBlock, I am embedding containers and grids within each other. Sometimes there five or six levels, will this make the CSS unnecessarily “heavy”?
– Is there a way to add icons to the heading block.
Thanks again for your time and great work.
April 15, 2020 at 5:45 pm #14822Tom
KeymasterHi there,
The negative margin is the problem there I think.
1. Image resizing actually resizes the images, which is better for performance than using the original large image.
2. Yes, try to reduce the number of blocks you have on a page as much as possible.
3. In GenerateBlocks? Yes, there’s an Icon panel in the Headline block.
-
AuthorPosts
- You must be logged in to reply to this topic.