[Support request] Bug or error CSS?

[An Nguyen]

Hi all,

I have two issues that need you to support below:

1/ I use latest version of GP and WP 5.3. May I ask you this case that is so strange. I tested images of posts in the blog link (attachment) in Safari and Chrome. In Chrome, the image of posts is over the right margin of container about 10px. However, safari it works perfectly without any issue.

2/I has used only CSS simple plugin. Now, the CSS code line is over 5k. Should I transfer it to file style.css of child theme? I read the documents of the plugin that said: “Simple CSS should not be used for huge documents. If your CSS is larger than 1k lines, you should consider using a child theme.” I’ve already added a child-theme and active it. However, I’m still using CSS. I have no idea how to transfer it to child-theme.

[David]

Hi there,

1. This CSS:

.generate-columns-container .inside-article {
    display: flex; 
    flex-flow: column wrap;
    width: 100%;
    text-align: left;
}

I am not even sure what the flexbox properties are being used for. But to fix it change flex-flow: column wrap; to flex-direction: column;

2. Copy your CSS – then you need to edit the styles.css file in the Child Theme folder and past the code within. You can either edit the file via FTP or in Dashboard > Appearance > Theme Editor.

[An Nguyen]

Hi David,

All done ! The issues are solved! I found another “wrap” lead to the problem. It means that I should remove one like you show me the solution.

Thanks for your support.

An.

[David]

You’re welcome

[An Nguyen]

Hi David,

I got 2 strange errors which displays on cavas-off menu area. My CSS code using with simpleCSS plugin will work without any errors but if I copy the code to styles.css file of child theme, the errors happens (theme editor)

1/ Logo and search display in wrong position
2/ The width of cavas-off panel is smaller even though I set it 368px in width.

`.offside–right.is-open {
-webkit-transform: translate3d(-368px, 0, 0);
-moz-transform: translate3d(-368px, 0, 0);
-ms-transform: translate3d(-368px, 0, 0);
-o-transform: translate3d(-368px, 0, 0);
transform: translate3d(-368px, 0, 0);
}’

I still keep these errors display on cavas-off area on my website. You can go and see.

Thanks David.

Update: I can fix this by adding !important

[David]

Looks like you got it resolved.

[Author]

Posts