Recipe plugin

  • Author
    Posts
  • #105790

    missfoodfairy
    Member
    Original poster

    I use [recipe] and [/recipe] for making my recipes stand out on my food blog.

    The blog layout looks perfect (please check my blog as I couldn’t take a screen shot to show you) but on my mobile site they read terrible (see screen shot photos)

    Do you have any suggestions on how a recipe can look on the mobile site without altering the way the recipe looks on the blog?

    Screenshot_20170125-115228.png
    Screenshot_20170125-115255.png

    The blog I need help with is: missfoodfairy.com

    #105892

    ricardpriet
    Theme Author

    Hellomissfoodfairy
    thank you for writing

    Unfortunately no screenshot were shared on your message, only the images filename. You can follow this tutorial to share them with us:
    https://en.support.wordpress.com/make-a-screenshot/#sharing-your-screenshot

    With them we could help you :)

    Thank you again!
    Ricardo P. from SiloCreativo

    #105896

    missfoodfairy
    Member
    Original poster

    This is what my recipes look like on my mobile –

    https://missfoodfairy.files.wordpress.com/2017/01/screenshot_20170125-115228.png

    https://missfoodfairy.files.wordpress.com/2017/01/screenshot_20170125-115255.png

    This is what my recipe looks like on my blog –

    https://missfoodfairy.files.wordpress.com/2017/01/screen-shot-2017-01-31-at-2-07-52-pm.png

    Is there a way to make the mobile site recipe look the same as the blog Ricardo. Thank you :)

    #105904

    ricardpriet
    Theme Author

    Hi missfoodfairy,

    We are able to see your pint now. Yes, it seems like the image is floating to right, but when user is on a mobile device, this floating breaks the design.

    So best solution here is to order element vertically when user is on mobile, getting this:
    http://imagizer.imageshack.com/img923/448/C1deMI.jpg

    For that, you have to add the following CSS:

    @media (max-width: 577px) {
    .jetpack-recipe-content img[class*="align"] {
        margin-left: 0;
        margin-right: 0;
        float: none;
        display: block;
    }
    }

    Hope this helps,
    Ricardo P. from SiloCreativo

    #105918

    missfoodfairy
    Member
    Original poster

    Thank you Ricardo,

    This has worked. There’s just one small thing that’s not working –

    When mobile site is vertical, the ‘ingredients’ is above the photo
    https://missfoodfairy.files.wordpress.com/2017/02/screenshot_20170201-101251.png

    When the mobile site is horizontal, ‘ingredients’ is exactly the same as the blog – perfect :)
    https://missfoodfairy.files.wordpress.com/2017/02/screenshot_20170201-101236.png

    Is there a way that the ‘ingredient’ when looking vertical is below the photo so the recipe reads fluently, as per blog & horizontal layout.

    Thank you for all your help :)

    #105922

    ricardpriet
    Theme Author

    Hi missfoodfairy,

    This change can not be done with CSS. The HTML generated by the shortcode is sending the “Ingredients” title above the image. ¿Could you change this in your post editor?

    You have to have the following order:
    – image,
    – Ingredients:
    – name of recipe (for example MEAT AND MARINADE:)
    – list of ingredients.

    Nowadays the image is sending in second place and there is not a clean way to change this order with CSS.

    If you can not, please send us your full recipe shortcode.

    Thank you,
    Ricardo P. from SiloCreativo

The topic ‘Recipe plugin’ is closed to new replies.