How can I write a CSS code to align an image to the right?

[IhorBulhakov]

Hi! Can somebody write a CSS code on how to align image on the right?

I would like to have this:

[shreyhweb]

@IhorBulhakov 

give us the store URL then we will able to help you.

[IhorBulhakov]

it's not published 

[ijam]

Hi, it depends on your image element. If you show me the html code I can help you more.

try this one:

img{

float: right;

}

or

img{

display: -webkit-box;
margin-left: auto;

}

Good Luck.

[IhorBulhakov]

<div class="index-section">

<div class="page-width feature-row-wrapper feature-row--50"><div class="feature-row"><div class="feature-row__item feature-row__text feature-row__text--right text-left aos-init aos-animate" data-aos=""><div class="rte appear-delay"><p>We aim to equip medical professionals in revolutionizing the way guards are created. Our medical providers witness the transformation it brings to patient outcomes, ensuring their physical capabilities are restored while maintaining the utmost quality and comfort.</p><p><br>Our clinicians feel empowered with XO ARMOR technology and are in charge of their time and effort.</p></div></div><div class="feature-row__item feature-row__images aos-init aos-animate" data-aos=""><div class="feature-row__first-image"><div class="image-wrap loaded" style="height: 0; padding-bottom: 90.64856711915536%;">

<image-element>

<img src="//cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=1080" alt="" srcset="//cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=180 180w, //cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=360 360w, //cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=540 540w, //cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=750 750w, //cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=900 900w, //cdn.shopify.com/s/files/1/0590/7693/5732/files/Untitled-1_698de7ba-3990-4eb1-a308-dbb41c015c7f.png?v=1687085602&amp;width=1080 1080w" width="1080" height="979" loading="lazy" class="feature-row__image lazyloaded" sizes="(min-width: 769px) 50vw, 100vw">

</image-element>

</div></div></div>
</div>
</div>

</div>

[ijam]

Did you try the above CSS codes?

[IhorBulhakov]

yes, didn't work

[ijam]

If you want I can send a collaboration request to your shop for fixing it. Send the domain. You can also share the preview link of your unpublished theme:)

[IhorBulhakov]

cannot do this

[osamafarooqi71]

Hello @IhorBulhakov, this could be done via custom coding. But for this I jeed to check your code. 

Please either provide the URL of your website or share theme name and section you want to use. So, I can provide you proper guidelines.

Regards,

Osama Farooqi 

[dmwwebartisan]

@IhorBulhakov 

Please share your store URL!

Thanks!

[IhorBulhakov]

https://c8043qthil2oitrf-59076935732.shopifypreview.com

[dmwwebartisan]

@IhorBulhakov 

your section image all ready display on the right side please check the following screenshot.

what you want!

[IhorBulhakov]

I want to have it like this, so that image is on the right till the border

[dmwwebartisan · Accepted solution]

@IhorBulhakov 

Please add the following CSS code to your assets/theme.css bottom of the file.

@media only screen and (min-width: 1050px){
#shopify-section-template--15647742656564__b6ffef04-33f2-4bc6-a875-030a17042226 .feature-row {
    margin: 0 1% !important;
}

#shopify-section-template--15647742656564__b6ffef04-33f2-4bc6-a875-030a17042226 .page-width {
    max-width: 100%;
    margin: 0;
    padding: 0 0px !important;
}

}

Thanks!

[dmwwebartisan]

@IhorBulhakov 

If helpful then please Like Solution.

welcome again!

Thanks!

[IhorBulhakov]

you are genius! love u