SusanMac

Sorry I forgot to include that...it is https://www.bagadu.com

Hi there, I just got a note from Google that the text on one of my mobile pages was too long to fit the screen. Sure enough, I discovered that the text in my announcement bar, which has always been two lines on mobile, overlaps itself on a single line because the announcement bar isn't expanding down to hold it, like it used to. Any ideas?

OMG it worked Tuan, thank you SO MUCH!!!

Site URL: https://www.bagadu.com Hi there, I have been struggling with this for a while...on my homepage, on the image directly beneath my banner (on mobile phone and tablet -- not on computer), there is way too much space above and below. I'm almost certain it is not a banner problem; when I look at the image online I can see a super-light gray box, almost imperceptible, where the image resides and it seems to be horizontally centered there rather than at the top of the box. Whether that be the case or not, it appears overall that there is way too much padding above and below that image. Making the image shorter or narrower doesn't help. 😒

Site URL: https://bagadu.com Hi there, When I type my company name ("bagadu") in Google and other search engines, my working site address appears ("https://synthesizer-broccoli-5mar.squarespace.com/config/"). When I manually type "bagadu.com" in the search engine, the site name appears properly. How can I prevent the working site address from appearing?

It worked! Thank you Tuan!!

Hi Tuan, it didn't work for me 😞 I think that I must have some conflicting CSS. I'm pasting what i've got, if you don't mind having a look. @media screen and (max-width:991px) and (min-width:768px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } body.homepage article section:nth-child(2) { margin-top: 70px !important; } }.sqs-announcement-bar-close {display: none } .header-menu-nav-folder-content { position: relative; display: flex; width: 100%; flex-grow: 1; flex-shrink: 0; justify-content: start; flex-direction: column; top: 6px; /* Update this value to your need */ } @media only screen and (min-device-width: 481px) and (max-device-width: 768px) { .header .header-announcement-bar-wrapper { padding-bottom: 1; } } @media only screen and (max-width: 480px) and (orientation:portrait) { body.homepage article section:nth-child(2) { margin-top: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) { body.homepage article section:nth-child(2) { margin-top: 200px !important; } } @media only screen and (max-width: 480px) and (orientation:landscape) { body.homepage article section:nth-child(2) { margin-top: 250px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) { body.homepage article section:nth-child(2) { margin-top: 250px !important; } } .sqs-announcement-bar-content { background-color: #16559c !important; } .sqs-block-horizontalrule { padding-top: 10px; padding-bottom: 5px; } .sqs-block.form-block .form-wrapper input[type=submit], { color:white } .sqs-block.form-block .form-wrapper input[type=submit], .sqs-lightbox.form-lightbox .form-wrapper input[type=submit] { display: block; background-color:hsl(212, 75%, 35%); } .sqs-announcement-bar p strong { color: rgb(181,230,29) !important; } p { margin-top: 5px !important; margin-bottom: 5px !important; } p2 { margin-top: 10px !important; margin-bottom: 10px !important; } h1 { margin-top: 0px !important; margin-bottom: 0px !important; } h2 { margin-top: -15px !important; margin-bottom: 0px !important; } h3 { margin-top: 13px !important; margin-bottom: 0px !important; } .user-accounts-link { display: none; } .header-menu-nav-item a { font-size: 16px; } user-accounts-link { display: none !important; visibility: hidden !important; opacity: 0 !important; color: white !important; font-size: 0 !important; } .user-accounts-link { display: none !important; visibility: hidden !important; opacity: 0 !important; color: white !important; font-size: 0 !important; } .CartTableRow-imageBg-97RUm {border: 1px solid hsl(220, 15%, 75%)} .CartTable-subtotal-2nJjm {color:hsl(212, 75%, 35%)} .checkout-button:hover {background-color:hsl(212, 75%, 35%)!important;opacity:100!important;} .empty-message { visibility: hidden; } .empty-message:before { visibility: visible; content: "Your cart is currently empty."; font-size: 15px; } /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ .sqs-block-image { width: 75%; margin: 0 auto; } #block-yui_3_17_2_1_1587931238405_18169 {display: none; } #block-yui_3_17_2_1_1588741876913_15084 { width: 65% } #block-yui_3_17_2_1_1571589838108_28063 .sqsrte-large {font-size: 15px; } #block-yui_3_17_2_1_1571622920306_21730 { width: 90% } #block-yui_3_17_2_1_1587824786630_13489 {display: none; } #block-e48ef5e0dac4324ce0eb .sqsrte-large {font-size: 15px; } #block-yui_3_17_2_1_1593978346414_18550 .sqsrte-large {font-size: 15px; } /* Insert Code for Mobile Above This Line */ } /* begin mobile menu left flyout Version : 0.3d1 SS Version : 7.1 Dependancies : LESS Notes : uses LESS syntax the reveal menu items code supports up to 32 menu items in a menu By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ @flyout-transition-duration : 0.6s; /* should the menu close with the same effect or blink; it's gone? use false or true */ @close-effect : true; // make close effect a little shorter than open @close-duration-shorten-by : 0.2s; /* reveal menu item by itself shows no visible effect. you have to use either a built-in reveal menu item effect or write a custom CSS effect */ @reveal-menu-items : false; // begin ignored if @reveal-menu-items is false @reveal-menu-items-delay-step : 0.03s; @reveal-menu-items-effect-flyout : false; // end ignored if @reveal-menu-items is false // do not change anything below, there be the borg here // begin unset SS built-in menu effect @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header-menu { opacity : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; } } .header--menu-open .header-menu .header-menu-cta, .header-menu, .header-menu-cta, .header-menu-nav-item a, .header-menu-nav-list { opacity : unset; -webkit-transform : unset; -ms-transform : unset; transform : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; will-change : unset; } /* end unset SS built-in menu effect */ // begin move menu off screen .header-menu { transition-property : transform; transform : translateX( -100% ); will-change : transform; .close-effect ( @flyout-transition-duration, @close-duration-shorten-by ); } .header-menu-nav-folder { transform : translateX( 200% ); } // end move menu off screen // begin move menu on screen .header--menu-open .header-menu { @duration : @flyout-transition-duration; -webkit-transition-duration : @duration; -o-transition-duration : @duration; transition-duration : @duration; transition-timing-function : ease-out; transform : translateX( 0 ); } .header-menu-nav-folder--active { transform : unset; } // end move menu on screen // close menu effect, optional .close-effect ( @duration, @offset ) when ( @close-effect = true ) { @d : round( @duration - @offset, 3 ); -webkit-transition-duration : @d; -o-transition-duration : @d; transition-duration : @d; transition-timing-function : ease-in; } .reveal-menu-items ( @flyout-transition-duration, @reveal-menu-items-delay-step ); // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { .reveal-menu-items-effect-flyout ( @flyout-transition-duration ); // reveal menu items effect flyout .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) { // @reveal-menu-items = true, .header-menu-nav-item { transform : translateX( -100% ); transition-duration : @duration; } .header--menu-open .header-menu-nav-item { transform : translateX( 0 ); } } @iterations : 32; .transition-delays ( @i ) when ( @i > 0 ) { .header-menu-nav-item:nth-child( @{i} ) { @d : round( @i * @step + ( @start / 2 ), 3 ); transition-delay : @d; } .transition-delays ( @i - 1 ); } .transition-delays ( @iterations ); } // end mobile menu left flyout

Site URL: https://synthesizer-broccoli-5mar.squarespace.com/ Hi there, wondering how I can add little divider lines between the menu items on my overlay menu to spice things up. Thank you!

Your picture is exactly right! I'd like to move the logo closer to the announcement bar and also move the picture closer to the logo. Could the announcement bar be affecting this, sort of pushing everything down? Thanks for your help.

Site URL: https://synthesizer-broccoli-5mar.squarespace.com/ Hi. I've been struggling with too much white space above and below my site header when looking at it on a tablet (both landscape and portrait view). It's fine on my computer and mobile phone. I played around with padding values and margin values but had no luck. Any ideas? I feel like it must be a simple fix. https://synthesizer-broccoli-5mar.squarespace.com pw=McDonald123 Also, I wanted to mention that while I was working on the issue (for hours!) I cobbled together various code I found on this forum in an attempt to control the banner spacing on a phone and a tablet separately, and further, to control how the spacing would appear on each device in both portrait view and landscape view. I had some limited success. This type of more granular control might be something commonly done, I just couldn't find information about it. I pasted the code below to see if anyone has comments. Thank you! @media only screen and (max-width: 480px) and (orientation:portrait) { body.homepage article section:nth-child(2) { margin-top: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) { body.homepage article section:nth-child(2) { margin-top: 200px !important; } } @media only screen and (max-width: 480px) and (orientation:landscape) { body.homepage article section:nth-child(2) { margin-top: 250px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) { body.homepage article section:nth-child(2) { margin-top: 230px !important; } }

THANK YOU Tuan!!

I'm a dork...the site should be visible now with pw McDonald123. Thanks Tuan!

Sorry, I thought I did it right. My pw is McDonald123.

My home page is https://synthesizer-broccoli-5mar.squarespace.com/home, and then the issue is visible in mobile mode when you click the burger menu. Thank you!

Hi, I added announcement bar with a blue background and mostly white text. I made a few of the words green (through custom CSS) for emphasis. The bar appears nicely on every page EXCEPT on mobile when I click on the burger box menu. On that page, there is no blue bar color and I can only see the words in green. Any ideas why the blue background disappears? It doesn't appear to be hidden behind anything, you can see the space it would occupy, just no blue behind it. Thank you! FYI, the custom CSS code I have for the green text is: .sqs-announcement-bar p strong { color: rgb(181,230,29) !important; }