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, 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.
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.
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
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
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
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
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.
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
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
Hey,
thank you very much!
That was a bit embarrassing :D
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!
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
That worked very well, thank you!
Hi,
Please go to the file path OR (Dashboard → Plugins → Plugin Editor)
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.
Thanks a lot, that worked!