Resizing a photo in a static page/pined post

Help Customization
1

Hi All!

I’m having trouble adding a small size photo to a static page/pined post called “About Me”. Here is the link to the page in my Arabic blog: https://write.as/msr-ly/about

As you can see my photo appears to be large. I made sure to resize it to 500X500 before uploading it to Snap.as yet it appears as if it is 1100X1100. Any thoughts?

003 square (1)
003 square (1)900×900 518 KB

2

Hi @masarali! Snap.as resizes it that way by default. You’ll have to use HTML to change the height & width with whatever you prefer. Here’s the HTML code to use in the pinned post (feel free to change the height and width):

<img style="height:500px; width:500px;" src="https://i.snap.as/Hil5tJx.png">

Hope that helps and let us know if you need more clarification.

2 Likes
3

Perfect, it worked! Is there also an HTML style element to position it at the center of the page?

4

Great! So for centering the image, you will have to go into your blog’s Customize settings & add the following code to your “Custom CSS”:

img {
    display: block;
    margin: 0 auto;
}

This will center the photo but also any other photo you use on your blog. Would that be preferable?

If not then you can specifically target this picture and not any other. We can do this by creating a “profile” class. To do that we’ll change the above CSS to the following:

img.profile {
    display: block;
    margin: 0 auto;
}

And then go back to the HTML with your photo and add the class into the HTML:

<img class="profile" style="height:500px; width:500px;" src="https://i.snap.as/Hil5tJx.png">

Once that’s changed it should work on that photo alone, allowing other photos to not be centered by default.

Hope that helps @masarali!

2 Likes