HarveyAquino Posted February 21, 2021 Share Posted February 21, 2021 (edited) Site URL: https://www.harveyaquino.com I'd like to have this image in my homepage expand. I'm on 7.0, Haute template. Thanks! Edited February 21, 2021 by HarveyAquino Link to comment
creedon Posted February 21, 2021 Share Posted February 21, 2021 I can't find that image on your home page. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
HarveyAquino Posted February 21, 2021 Author Share Posted February 21, 2021 Oh sorry, here I put it back up. https://www.harveyaquino.com Link to comment
creedon Posted February 21, 2021 Share Posted February 21, 2021 Give us some time to look at your issue. I'm about to head off to slumberland myself. If any of the regulars want to pitch in here please feel free! HarveyAquino 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
HarveyAquino Posted February 23, 2021 Author Share Posted February 23, 2021 Any workarounds? Link to comment
derricksrandomviews Posted February 23, 2021 Share Posted February 23, 2021 (edited) Haute and Farro, in style tweaks you can adjust the padding on both sides of the site. I assume that means you can remove it which should widen the site to full bleed. This may help as well: Edited February 23, 2021 by derricksrandomviews HarveyAquino 1 Link to comment
HarveyAquino Posted February 27, 2021 Author Share Posted February 27, 2021 On 2/23/2021 at 9:05 PM, derricksrandomviews said: Haute and Farro, in style tweaks you can adjust the padding on both sides of the site. I assume that means you can remove it which should widen the site to full bleed. This may help as well: Hi! Thanks for this. However, putting the site padding value to 0 affects everything including the navigation buttons. I would like it just for the image block. And second, it only makes the image full-width. I tried this code below and I got what I wanted for the image but now it also covers my logo and navigation. #block-yui_3_17_2_1_1613893986644_10835{ padding: 0px ! important; margin-top: -20% !important; margin-left: -10% !important; margin-right: -10% !important; } Link to comment
HarveyAquino Posted February 27, 2021 Author Share Posted February 27, 2021 To give you an idea of what I'm trying to achieve, here is a screen cap of one of my blog posts. This is a I think one of the features of Haute, that's why I love this template for blogging. You can set full-bleed banner images for each blog posts. I just hope I can do this with my homepage. Link to comment
HarveyAquino Posted February 27, 2021 Author Share Posted February 27, 2021 I think I found a workaround. I made the header position fixed, so that it will always be visible. Now I just have to make it transparent. Don't know if this will work though. Link to comment
HarveyAquino Posted February 28, 2021 Author Share Posted February 28, 2021 Update: It worked! This is what my homepage looks like at the moment. I also made the navigation bar change color when scrolling. Now I just have to find a way to reduce the space above the header when scrolling. Link to comment
tuanphan Posted March 11, 2021 Share Posted March 11, 2021 On 2/28/2021 at 12:40 PM, HarveyAquino said: Update: It worked! This is what my homepage looks like at the moment. I also made the navigation bar change color when scrolling. Now I just have to find a way to reduce the space above the header when scrolling. Add to Design > Custom CSS header.Header.loaded.on-scroll { padding-top: 10px; } HarveyAquino 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HarveyAquino Posted March 11, 2021 Author Share Posted March 11, 2021 3 hours ago, tuanphan said: Add to Design > Custom CSS header.Header.loaded.on-scroll { padding-top: 10px; } This worked perfectly! Thanks! Link to comment
Denimrush Posted January 6, 2022 Share Posted January 6, 2022 Hi! I tried this code and it isn't working for me. I am using the native template! Please let me know if you have any suggestions! Thank you!!! Link to comment
tuanphan Posted January 6, 2022 Share Posted January 6, 2022 9 hours ago, Denimrush said: Hi! I tried this code and it isn't working for me. I am using the native template! Please let me know if you have any suggestions! Thank you!!! What is page url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Denimrush Posted January 12, 2022 Share Posted January 12, 2022 https://www.garrettcarterdesigns.com/ This is the website - we are trying to push up the images to be full bleed up and side Link to comment
tuanphan Posted January 13, 2022 Share Posted January 13, 2022 8 hours ago, Denimrush said: https://www.garrettcarterdesigns.com/ This is the website - we are trying to push up the images to be full bleed up and side Try adding to Design > Custom CSS body.homepage div#site { padding-left: 0px !important; padding-right: 0px !important; } body.homepage div#canvas { max-width: 100% !important; } body.homepage { overflow-x: hidden; } body.homepage section#page { max-width: 100% !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Denimrush Posted January 13, 2022 Share Posted January 13, 2022 This code doesn't seem to work for me! I followed the code above from what worked and got the image to be full bleed but cannot get the logo and navigation to show up ontop of the image. Any suggestions? Link to comment
tuanphan Posted January 17, 2022 Share Posted January 17, 2022 On 1/14/2022 at 12:36 AM, Denimrush said: This code doesn't seem to work for me! I followed the code above from what worked and got the image to be full bleed but cannot get the logo and navigation to show up ontop of the image. Any suggestions? It looks fine to me Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
CleBee Posted October 22 Share Posted October 22 Hi, can anyone help me achieve the same thing on a 7.1 website please! I would like to do this kind of full bleed image on the homepage only and have no idea how to go about it. Any help would be amazing. Here is my website: https://www.cleabroad.co.uk Link to comment
tuanphan Posted October 26 Share Posted October 26 On 10/23/2023 at 4:41 AM, CleBee said: Hi, can anyone help me achieve the same thing on a 7.1 website please! I would like to do this kind of full bleed image on the homepage only and have no idea how to go about it. Any help would be amazing. Here is my website: https://www.cleabroad.co.uk Which image are you referring to on home page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
addisonpann Posted November 9 Share Posted November 9 On 1/13/2022 at 12:16 AM, tuanphan said: Try adding to Design > Custom CSS body.homepage div#site { padding-left: 0px !important; padding-right: 0px !important; } body.homepage div#canvas { max-width: 100% !important; } body.homepage { overflow-x: hidden; } body.homepage section#page { max-width: 100% !important; } I've tried this on my site to no avail. Any chance you could assist me too? https://www.addisonpann.com/greenslate I'm trying to make the hero banner full bleed across the width of the page. Thanks! Link to comment
creedon Posted November 9 Share Posted November 9 2 hours ago, addisonpann said: I've tried this on my site to no avail. The reason the code won't work on the greenslate page is that it is not the homepage of the site and so doesn't have the homepage class name that you see in the code. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
addisonpann Posted November 9 Share Posted November 9 2 hours ago, creedon said: The reason the code won't work on the greenslate page is that it is not the homepage of the site and so doesn't have the homepage class name that you see in the code. Oops. Thanks for that. What should my targets be instead of the following? body.homepage div#site { padding-left: 0px !important; padding-right: 0px !important; } body.homepage div#canvas { max-width: 100% !important; } body.homepage { overflow-x: hidden; } body.homepage section#page { max-width: 100% !important; } Link to comment
creedon Posted November 18 Share Posted November 18 On 11/9/2023 at 9:27 AM, addisonpann said: I'm trying to make the hero banner full bleed across the width of the page. Did you solve this issue? It appears the first image on the page is full bleed. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment