Dawn theme - Alignment of photo and text not visible on the phone

Themes
1

Hi there,

I am new and keep running into issues as I try to customise Dawn theme for my blog.

Latest is, I am trying to align photo on the left with text on the right on a page.

Screenshot 2023-05-29 at 15-46-13 Now
Screenshot 2023-05-29 at 15-46-13 Now1920×769 26.6 KB

But the photo isn’t visible on the mobile version, only the text. I am sure I messed up the code, sharing it below. Was trying to be adventurous little bit as I saw similar on other blogs and they look equally gorgeous on the phone, unlike mine.

HTML from the page:

<img src="https://wherethephotois.jpg"  alt="parrot" />

<figcaption style="text-align: center";></figcaption>

<p> Life at the moment. <i>(Updated: May 21, 2023)</i><br><br> 

🚩 details go here when ready.<br><br>
    📖 currently reading
</p>
2

Can you give a bit more of the surrounding code? And any styles you applied to it? I suspect the layout is too wide for mobile and you need a @media query to change from side to side behavior to stacked. If you’re using flex, you need to change flex-direction.

3

Thanks Cathy.

I should have put a disclaimer I am new to coding, sorry. Maybe @media query is the answer to the issue but I don’t know how to use it.

There isn’t any other code surrounding it (at least none consciously done by me). I added the above in the HTML box after creating new page with the theme. If the photo-alignment is too complicated maybe I will drop it for now.

I will look into @media query and experiment a bit to achieve the look. Thanks for pointing in the direction.

4

The code you posted doesn’t produce side by side behavior unless there’s some really broad styling being applied by the theme. Is this page online somewhere I can see it? :)

5

Uh oh, I knew it would be more complicated than it looks. Ghost is deceptive in its simplicity. Loving it so far.

The site is under construction, Cathy, hidden mode. :smiling_face:

Here’s the link Sonya Cheoünt - Private Site Access

The password is Hellohi@2023

The page in question is the Now page. :)

6

Thanks. Always easiest to see the problem ‘live’.

So you currently have the following in an HTML card:

<section>
    
<figure style="float: left; width: 50%; margin-left: -235px; margin-right: 30px;">
    
	<img src="https://cdn.getmidnight.com/a35473cf94d983e392c83b24d265f3c1/2023/05/Stocksy_txp8a12d0aa3Iw000_Small_958219-1.jpg" alt="about parrot">
    
	<figcaption style="text-align: center" ;></figcaption>
    
</figure>

    <p> Life at the moment. <br><br> 
    
    🚩 details go here when ready.<br><br>
        📖 currently reading <br><br>
        <i>Last updated: May 21, 2023</i>
	</p>

</section>

You’re not seeing the image on mobile because you’ve set the figure’s margin-left to -235px. When the screen is 400px, that makes the figure a bit under 200px. (There’s some padding, so you’re only getting 50% of the width of the section.) So that’s entirely off screen.

Side by side layout is probably a mistake on small screens. I suggest the following, which will allow you to have your side by side layout on big screens and stacked on small screens. Notice the use of the @media query and the <style> section (this is css), which lets me set styles based on screen size. If you wanted to use float instead (so that the text would wrap around the image instead of being next to it, you could do that - but use a similar media query to only apply the float when the screen is big enough.

<section class='side-by-side'>
    
<figure>
    
	<img src="https://cdn.getmidnight.com/a35473cf94d983e392c83b24d265f3c1/2023/05/Stocksy_txp8a12d0aa3Iw000_Small_958219-1.jpg" alt="about parrot">
    
	<figcaption style="text-align: center" ;></figcaption>
    
</figure>

    <p> Life at the moment. <br><br> 
    
    🚩 details go here when ready.<br><br>
        📖 currently reading <br><br>
        <i>Last updated: May 21, 2023</i>
	</p>

</section>
<style>
@media only screen and (max-width: 600px)  {
.side-by-side {
  display: grid;
  grid-template-columns: 1fr;
}}
@media only screen and (min-width: 601px)  {
.side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px
}}
</style>

If you anticipate wanting this layout regularly, you might want to put the style declaration into code injection, so that you don’t need it every time.

7

Thank you Cathy :slight_smile:

I copied your code in HTML card (please have a look if you can) and it did solve the issue on the mobile, there is now a photo above the text, neatly stacked. :) :clap:t4:

On the desktop though, the text is below the photo and not next to it. You think I am doing something wrong again?

8

I think you didn’t get it all - did you get the styles? Oh hang on. My code is missing a </style>. AND I had mix for min… Will update.

9

Oh my God! Oh my God! Yes, yes, yes!!!

Thank you Cathy :hugs: THIS is exactly what I was looking to achieve. Look so cute and neat. Can’t thank you enough. You didn’t have to help a complete stranger with so much time and effort.

THANK YOU! (Yes I am intentionally shouting. :D )

1 Like
10

You’re welcome! Glad to help. :) Pass it on.

1 Like