Jump to content

Mobile Image Alignment to the right

Recommended Posts

Site URL: https://wild-within-pt.squarespace.com

Hi all!

I'm trying to use CSS to move an image to align to the right edge of the window just in mobile view. I've been able to use CSS to get the section above to align the image block to the left edge of the screen but cannot figure out how to get the next section to move the image block to the right edge of the screen. I've attached screen shots of what I'm talking about and any help is greatly appreciated!

Screen Shot 2020-11-08 at 6.49.12 PM.png

Screen Shot 2020-11-08 at 6.49.19 PM.png

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Your site is private, please enable password and show us 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, agreiner said:

Site link

password: wildwithinpt

have you solve it, I saw your images are fullwidth

image.thumb.png.45c1221614794807406cec62ae6d9ef0.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36 I haven't solved it. I'm looking to move that sunrise graphic above the words "doula care" to the right so that it lines up on the right edge of the screen. I was able to achieve that on the left edge with the rainbow graphic on the section above but can't seem to figure it out for the sunrise graphic + the right edge.

Link to comment
8 hours ago, agreiner said:

@bangank36 I haven't solved it. I'm looking to move that sunrise graphic above the words "doula care" to the right so that it lines up on the right edge of the screen. I was able to achieve that on the left edge with the rainbow graphic on the section above but can't seem to figure it out for the sunrise graphic + the right edge.

I used this

section[data-section-id="5fa82c0b0feb6513894ce378"] {
    overflow:hidden;
  }
@media only screen and (max-width: 768px) {
  
  #block-yui_3_17_2_1_1604859210143_16364 {
        text-align: right;
        display: inline-block;
        width: 100%;
        height: 150px;
        max-width: initial;
        padding: 0;
    }
    #block-yui_3_17_2_1_1604859210143_16364 .sqs-block-content {
        position: absolute;
        width: 80px;
        right: -4vw;
    }
}



image.thumb.png.ef77a3ab50e6dd4c60498590eae7e45c.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
1 hour ago, Tjudge said:

I am having a similar issue. I want my text align left in the banner but I want the image to be on the top for mobile. Do you know how to code this? 

Attached is what I would like it to look like but on mobile the image shows up after the words. 

Screen Shot 2021-01-19 at 6.46.18 PM.png

Screen Shot 2021-01-19 at 6.45.28 PM.png

You should attach your site url

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.