Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Place Logo Image in Bottom Right Corner of Hero Image


tinymachine

Question

  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 1
3 hours ago, tinymachine said:

Site URL: http://www.theblackgryphon.com

Howdy–

 

So, I'm trying to position a logo to the bottom right of the hero/header image. I've been trying to mess around with absolute positioning but I keep hitting a wall. Maybe I'm just not looking at it from the right perspective? Any help is super appreciated.

Place like so? What is the logo image you want to place

image.thumb.png.8d866ead231357916220f397b982927f.png

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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
  • 1
20 hours ago, tinymachine said:

 

Placed like so, yes. For the sake of explanation, let's just say the white "Black Gryphon" text logo.

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1616612699324_2538 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: 200px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
5 hours ago, tuanphan said:
div#block-yui_3_17_2_1_1616612699324_2538 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: 200px;
}

Worked like a charm. One thing that was tripping me up is that it wasn't showing that it was pinned to the corner in the Squarespace editor, but on the live site it looked fine. I posted a picture for posterity in case someone else runs in to the issue.

Thanks so much for the help.

 

IMAGES:

(1) How it looks in the editor

(2) How it actually looks on the live site

Screen Shot 2021-07-27 at 11.36.51 AM.png

Screen Shot 2021-07-27 at 11.38.40 AM.png

Link to comment
  • 0
On 7/27/2021 at 10:39 PM, tinymachine said:

Worked like a charm. One thing that was tripping me up is that it wasn't showing that it was pinned to the corner in the Squarespace editor, but on the live site it looked fine. I posted a picture for posterity in case someone else runs in to the issue.

Thanks so much for the help.

 

IMAGES:

(1) How it looks in the editor

(2) How it actually looks on the live site

Screen Shot 2021-07-27 at 11.36.51 AM.png

Screen Shot 2021-07-27 at 11.38.40 AM.png

Not sure why it doesn't work in editor. If you can add me as an admin, I can check in editor ☠️

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Found other problems. Do you need to fix?

Site URL – https://www.theblackgryphon.com/

1. (Desktop/Tablet – Event) Pagination is too close to the edge of the screen.

https://www.theblackgryphon.com/weekly-events/thirsty-thursdays

theblackgryphon.com-01-min.png

2. (Mobile – Homepage) On desktop, the entire image can be seen. On mobile, image is partially cut off.

https://www.theblackgryphon.com/

theblackgryphon.com-02-min.png

3. (Mobile – Homepage) Page is long. Add button Back to top?

https://www.theblackgryphon.com/

theblackgryphon.com-03-min.png

4. (Mobile – Menu) Reduce space between Contact and Gift cards?

https://www.theblackgryphon.com/

theblackgryphon.com-04-min.png

5. (Tablet – Header) Menu is cut into 3 lines.

https://www.theblackgryphon.com/

theblackgryphon.com-05-min.png

6. (Tablet – Footer) Email is cut into 2 lines.

https://www.theblackgryphon.com/

theblackgryphon.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...