[Expound] Issue with image article format for Tablet/Mobile
-
Hey all,
I am having formatting issues with my article below using the Expound theme: https://lifeofapixelgirl.wordpress.com/2017/05/05/titolo-dellarticolo-sul-blog-2/
If I use the web, the format is working, but if I see the article with a tablet or mobile the alignment is all a messed up.
I wonder if I am doing something wrong with the html?
The blog I need help with is: (visible only to logged in users)
-
Hi there,
The HTML used for the post doesn’t work well on all browser sizes because the spacebar has been used to add separation between items. So while it may look fine on larger screens, the layout begins to break down on small screens where the spaces are more visible.
One thing you could do is use a two image gallery instead of inserting individual images side by side. The gallery will scale better with your mobile views.
Also, we have a recipes shortcode you might want to try if you haven’t:
https://en.support.wordpress.com/recipes/Let me know if this helps.
-
Thank you for your reply. This shortcode looks super useful and fancy!
I am going to try it now and let you know.
-
Hey there,
I’ve tried to insert the two image gallery using the recipe shortcode, but the tablet and mobile version is still cutting all the right images.
Anyone can help me?
-
-
Sure.
Link: https://lifeofapixelgirl.wordpress.com/2017/05/05/titolo-dellarticolo-sul-blog-2/
Code:
[recipe title="Pasta Cacio e Pepe (Creamy cheesy Pasta)" servings="2" time="30mins" difficulty="medium" image="https://lifeofapixelgirl.files.wordpress.com/2017/05/fullsizerender-2.jpg?w=2048" description="A cheesy, tasty, Roman pasta recipe perfect for a very hungry partner."]
<h2>Ingredients</h2>
– 240g Pasta (Spaghetti; Bucatini; Rigatoni; Penne)
– 100g Parmigiano
– 100g Pecorino cheese
– Salt (coarse)
– Pepper (fresh)
<img class=”size-medium wp-image-172 aligncenter” src=”https://lifeofapixelgirl.files.wordpress.com/2017/05/caciopepedsc_2938.jpg?w=200″ alt=”” width=”200″ height=”300″ />
The pasta selection for this recipe is fundamental to create what we call in Italy “the cream of the pasta”. Yes, absolutely avoid fresh cream, it’s fat and unhealthy.Afeltra pasta is one of the best quality on the market because of its precious features: it’s strictly artisan, handmade and extruded through bronze. It’s perfect for any type of pasta dish that requires a big amount of starch to make the perfect cream (such as Carbonara). It costs 4.50€ and you can buy it online at Eataly.com . If you prefer to stay cheap, I recommend De Checco or Barilla pasta.
<img class=”size-medium wp-image-177 aligncenter” src=”https://lifeofapixelgirl.files.wordpress.com/2017/05/caciopepedsc_2943-1.jpg?w=300″ alt=”” width=”300″ height=”200″ />
Choose Parmigiano 30 months old and Pecorino of a medium ageing.
<h2>Preparation</h2>
[gallery ids="179,136" type="rectangular" link="file"]
<p style=”text-align: left;”>1. Get a pot and start boiling the water. Don’t put too much water and try to balance the amount of it with the pasta. In this way, the water will be rich of starch and will help to make the perfect cream.
2. When the water is boiling put a normal amount of coarse salt, but not too much (the Pecorino is already salt enough). Pour the pasta and time the cooking minutes (calculate 2 minute less from what the pack instructions says).</p>
[gallery ids="174,138,140,173" type="square" columns="2"]<b>3.</b> Grate the parmigiano and the pecorino all together and put it in a bowl.
<b>4.</b> Put a half ladle of boiled water into it and stir gently, <b>5. </b>until it becomes a solid pastry.
<b> 6.</b> Get a big pan and grate the pepper with high flame.[gallery ids="143,144" type="rectangular"]
7. Blast it for 1-2 minutes until you start to smell the toasted pepper.
8. Pour a full ladle of boiled water and make it bubble for 1 minute.[gallery ids="147,148" type="rectangular"]
<b>9.</b> When the pasta is half cooked, taste it, and if it’s “very al dente” throw it immediately in the pan.
10. Add another full ladle of boiled water and finish to cook the pasta for 1-2 minutes.[gallery ids="151,150" type="rectangular"]
<p style=”text-align: left;”>11. Taste the pasta and, if you think is ready, remove the pan from the flame, get the parmigiano/pecorino pastry and put it in the pan.
<b>12.</b> Pour another full ladle of boiled water and stir until the sauce become creamy</p>[caption id="attachment_153" align="aligncenter" width="300"]<img class=”aligncenter size-medium wp-image-153″ src=”https://lifeofapixelgirl.files.wordpress.com/2017/05/foto-10-05-17-20-24-33.jpg?w=600″ alt=”Foto 10-05-17, 20 24 33″ width=”300″ height=”225″ /> 14.[/caption]
<p style=”text-align: left;”>14. The Cacio e Pepe is now ready to serve!</p>
Let me know in the comments how was your pasta or if you have any question. :)Buon appetito!
[recipe-notes]
Credit: https://lifeofapixelgirl.wordpress.com/
[/recipe-notes]
[/recipe] -
HI again,
It seems I’ve led you down a wrong path here :(
The galleries work inside of the recipes shortcode, but they try to keep the width of the overall page. Without the use of some CSS, they won’t work well in the recipes shortcode.
I’ve set up an alternative display of the content here for you:
https://lifeofapixelgirl.wordpress.com/?page_id=376&preview=trueIt doesn’t use two columns, but it also doesn’t break like the original layout, and you can see the full images even on mobile.
If you like that look, you can edit that page and copy everything from the HTML tab into your post’s HTML tab.
-
-
Glad I could help!
I’ll mark this as resolved, but if you need help with a different issue, feel free to start a new thread.
- The topic ‘[Expound] Issue with image article format for Tablet/Mobile’ is closed to new replies.
WordPress.com Forums 