ManonLarrieu Posted July 11, 2020 Share Posted July 11, 2020 Hello everyone ! I am almost done with my website, super thrilled about that. I still have a few issues regarding my section overlay :https://www.qualitycupofcoffee.com/english It concerns the 2nd Overlay "Consulting" for the consulting box. I created a "page" for my text box that I tried to overlay on the previous section. It works fine for the top of the box (white background) however the background colour of my page is hidden under the background colour of the next section (pink). I really want to have the full section in white. I am struggling to make the half bottom of the box come above the next section. In the meantime I coloured the text in grey to create that visual separation effect but that's not what I want ... Any thoughts? Best Link to comment
rwp Posted July 11, 2020 Share Posted July 11, 2020 I'm not exactly sure what you want to change. I looked at it quick on mobile. A lot of the font is almost the same color as it's back ground. Your back to top button and one other thing are over hanging to the right also. When the page loads, it's wider than the screen, giving a left to right scroll on my phone. Can you post some screen shots of what you need changed? Link to comment
ManonLarrieu Posted July 11, 2020 Author Share Posted July 11, 2020 (edited) Oh my god ! I didn't spot that side problem on mobile. It's probably due to my button position, I just have to bring it back to the middle of the box and it should be fixed. -> I removed the "grey color" which makes it confusing so you can see what problem I am trying to "hide". You see my white background colour is not appearing at the bottom. It's like it can't go above the pink colour ... Edited July 11, 2020 by ManonLarrieu Link to comment
rwp Posted July 11, 2020 Share Posted July 11, 2020 It's on top already, you just have a transparent background right now. 🙂 #consulting-service-1.Index-page { background-color: white; } Link to comment
ManonLarrieu Posted July 11, 2020 Author Share Posted July 11, 2020 It works, thanks ! I tried to code something similar but I think got tricked by adding a space between the " . " Thanks a lot😀 Link to comment
rwp Posted July 11, 2020 Share Posted July 11, 2020 @media only screen and (max-width: 640px) { #consulting-service-1 [id^="block-7dfd23ca259154eb501e"] .sqs-block-content { right: 1% !important; } } I think this should fix the button on mobile too. Link to comment
rwp Posted July 11, 2020 Share Posted July 11, 2020 One last thing, make sure you set up fall back images or set background colors for your video backgrounds. The videos don't load on my phone and you can't read the text. Link to comment
rwp Posted July 11, 2020 Share Posted July 11, 2020 I think just setting your background color of the body of the page should fix that issue too. Right now its set to that light color. This sets it to the dark color you have been using. #collection-5d30a903f44849000182e85e { background-color: #002d33 !important; } Link to comment
ManonLarrieu Posted July 11, 2020 Author Share Posted July 11, 2020 Ah yes ! I am finishing to code few pages, and I am going to upload back the pictures / screenshots I took from the video for the mobile version ! rwp 1 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