text and image cropped on category pages

[Janne]

Hi.
Have updated to the latest version of the theme. In mobile, the left side of the text in the category page is hidden. It has no space between the two blog post per line. See https://joyofmotioncrochet.com/free-crochet-patterns/.

Added some css to customize the category page, adding all custom CSS them in the private information. Are some of this css F***ing up my page?

[Leo]

Hi there,

The issue is likely coming from the CSS you’ve added.

Can you temporarily comment them out or remove them first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

I know that it is the case. The code have you created, see this support forum thread.
https://generatepress.com/forums/topic/display-2-column-on-mobile-2/

[Leo]

Did you switch from float to flex? If so that’s the issue.

Try removing this CSS:

.generate-columns-activated .generate-columns-container {
    margin-left: -40px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

It is now visible, thanks. But the two columns is not centered. Is it possible to do that?

I have not changed from floats to flexbox btw.

[Leo]

Hmm that’s strange.

Can you add back the CSS I asked to remove previously then turn off Autopimize and any other caching plugins you are using so I can take a closer look?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

Have now added the code and turned off “Optimize CSS Code?” in Autoptimize.

[Leo]

Sorry the source code is still showing up quite weird on your site.

Can you turn off Autopimize (not just a setting) and any other caching related plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

There are Autoptimize disabled.

[Leo]

That’s super strange.

When I test using the browser inspector tool and remove this CSS only:

.generate-columns-activated .generate-columns-container {
    margin-left: -40px;
}

It should look like this and not make it off-centered:
https://www.screencast.com/t/CWW3aAhcSkT

I couldn’t quite inspect the code last time because of Autopimize though. Can you remove that code again so I can take a closer look?

Sorry for the back and forth. We will get there 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

It’s working now. Don’t know what happened before. Can you help me get some air between the two blog posts as well?

[Leo]

Ahh I see what’s going on now.

Add this back again:

.generate-columns-activated .generate-columns-container {
    margin-left: -40px;
}

Then edit this:

.generate-columns-container>* {
    padding-left: 40px;
}

to this:

.generate-columns-container>* {
    padding-left: 40px !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

It is air now, thanks. But the title is not taking the full width as the image. Is that possible?

[Leo]

But the title is not taking the full width as the image. Is that possible?

Isn’t that always the case? I don’t think that changed at all.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts