Recipe 2 Columns | PenciDesign Support

Simon replied

5 years ago

Customer Reply

Thanks a lot, that worked!

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please go to the file path OR (Dashboard → Plugins → Plugin Editor)

wp-content/plugins/penci-recipe/inc/print.css

Find:

/* 2 colum recipe */
@media only screen and (min-width: 480px){
.penci-recipe:before, .penci-recipe:after{ content: ''; display: table; clear: both; }
.penci-recipe-ingredients{ width: 50%; float: left; margin: 0; padding-left: 0; padding-right: 15px; border-bottom: none; }
.penci-recipe-method{ width: 50%; float: left; padding-left: 15px; }
.penci-recipe-notes, .penci-recipe-tagged, .precipe-style-4 .penci-recipe-heading{ clear: both; }
}

Replace with:

.penci-recipe:before, .penci-recipe:after{ content: ''; display: table; clear: both; }
.penci-recipe-ingredients{ width: 50%; float: left; margin: 0; padding-left: 0; padding-right: 15px; border-bottom: none; }
.penci-recipe-method{ width: 50%; float: left; padding-left: 15px; }
.penci-recipe-notes, .penci-recipe-tagged, .precipe-style-4 .penci-recipe-heading{ clear: both; }

Regards,
PenciDesign.

Simon replied

5 years ago

Customer Reply

That worked very well, thank you!

PenciDesign replied

5 years ago

Staff Reply

Hi,

If you want to do that, please do follow steps below:

1/ Add more the code below like on this image:

@media only screen and (min-width: 480px){
.penci-recipe:before, .penci-recipe:after{ content: ''; display: table; clear: both; }
.penci-recipe-ingredients{ width: 50%; float: left; margin: 0; padding-left: 0; padding-right: 15px; border-bottom: none; }
.penci-recipe-method{ width: 50%; float: left; padding-left: 15px; }
.penci-recipe-notes, .penci-recipe-tagged, .precipe-style-4 .penci-recipe-heading{ clear: both; }
}

2/ Edit the code like on this image.

Best Regards,

PenciDesign

Simon replied

5 years ago

Customer Reply

Sorry, I have a another question about the styling, is it also possible to have the 2 column styling in the print version?

Thank you again very much, your support is excellent!

Simon replied

5 years ago

Customer Reply

Hey,

thank you very much!

That was a bit embarrassing :D

PenciDesign replied

5 years ago

Staff Reply

Hi,

I just checked it and It seems the comment from your CSS caused the issue.

You have comment like that:

//Rezept 2 Spalten

It should be:

/* Rezept 2 Spalten */

Please change it because your comment text make all the CSS below it broken.

Best Regards,

PenciDesign

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please save the custom CSS and show me the URL of your recipe, I will take it a look at this to help you.

Best Regards,

PenciDesign

Simon replied

5 years ago

Customer Reply

Hey,

thanks for the answer, there seems to be an error with the media query. I put the lower number and even tried 100px, both didn't work, even if my screen has an avaibleWidth of 2560.

PenciDesign replied

5 years ago

Staff Reply

Hi,

It seems your screen is too small, if so you can change the code I sent to this code:

@media only screen and (min-width: 961px){
.penci-recipe:before, .penci-recipe:after{ content: ''; display: table; clear: both; }
.penci-recipe-ingredients{ width: 50%; float: left; margin: 0; padding-left: 0; padding-right: 15px; border-bottom: none; }
.penci-recipe-method{ width: 50%; float: left; padding-left: 15px; }
.penci-recipe-notes, .penci-recipe-tagged, .precipe-style-4 .penci-recipe-heading{ clear: both; }
}

Best Regards,

PenciDesign

Simon replied

5 years ago

Customer Reply

Hello,

thank you, unfortunately it didn't work, with the media query it doesn't do anything at all (first attachment), without the media query it look like the second attached picture.

Thank you for your help!

Simon

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (min-width: 1170px){
.penci-recipe-ingredients{ width: 50%; float: left; margin: 0; padding-left: 0; padding-right: 15px; border-bottom: none; }
.penci-recipe-method{ width: 50%; float: left; padding-left: 15px; }
.penci-recipe-notes, .penci-recipe-tagged, .precipe-style-4 .penci-recipe-heading{ clear: both; }
}

Best Regards,

PenciDesign

Simon started the conversation

5 years ago

Conversation Start

Hello I found this Recipe, which is von Penci and it has 2 columns, one for the Ingredients and one for the instructions. I really liked the 2 column style, but I can't find it in the styles in the customizer, so how I can achieve something like that?

Thank you for the help,

Simon