ErinD

Oh weird, sorry! I included it in the field on the post but it didn't show up. However, miraculously it's working now lol! So crisis averted.

Hello, I have a website that I have in two languages and so i hide header items depending on which language you're on. Because you can only have one button in the header, I have created a "fake" button in the other language, which works great except it doesn't show on mobile. I'm just hoping you can tell me how to add this exact same experience for the mobile item. Password for the site is annauma /* Make donate button */ header#header [href*="/donate-iu"] { color: #000000 !important; border-color: #faa524 !important; background: #faa524; border-width: 2px; border-style: solid; border-radius: 10px; -webkit-transition: 0.1s background-color linear, 0.1s color linear; -moz-transition: 0.1s background-color linear, 0.1s color linear; -o-transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear; font-family: 'BARLOW SEMIBOLD'; font-weight: 700; font-size: 16px; font-style: normal; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2em; padding: .86em 1.6032em !important; }

I'm not sure I understand. This is the code that works to hide the IKU symbol and show the EN symbol on the home-iku (or any inuktitut page) : .icon[href*="http://annauma.ca/home"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] { background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.25); } As you can see, I hide the original icons, both of them, then show the one with a different image that I want to show up on that page.

That worked great, thanks! The social icons are on desktop, I circled them for easier visibility in the attachment. But they don't show anywhere on mobile. Beside the "IKU" on the left there's an "EN" one, but it's hidden. And then on the other language home page, the EN shows and the IKU is hidden.

Site URL: http://annauma.ca/home-iku Hello! I've gotten pretty much everything I need on my site now, and it works great on desktop! And on mobile for the most part, save for two things I'd like to solve: Make last nav menu a "button", and Add social icons but hide one + change logo I have this achieved on the desktop version. On the home page, you'll see one social icon hidden and one that says "IKU" - when you click on IKU, it takes you to the Inuktitut version of the site, and the original button is now hidden and a replacement "button" is there made from css code. On mobile, that replacement "button" is just a regular nav link and the social icons don't show up at all. English home page is annauma.ca password annauma IKU version is annauma.ca/home-iku Code for the social icon hide/replace logo that works on desktop: .icon[href*="http://annauma.ca/home"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] { background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.25); } (vice versa for the English icon) And code for the "button" that works on desktop: .header-nav-item [href*="/donate-iku"] { color: #000000 !important; border-color: #faa524 !important; background: #faa524; border-width: 2px; border-style: solid; border-radius: 10px; -webkit-transition: 0.1s background-color linear, 0.1s color linear; -moz-transition: 0.1s background-color linear, 0.1s color linear; -o-transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear; font-family: 'BARLOW SEMIBOLD'; font-weight: 700; font-size: 16px; font-style: normal; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2em; padding: .86em 1.6032em !important; } nav.header-nav-list { align-items: center; } .header-nav-item--active a{background-image:none!important} /* Hide eng donate */ .btn[href*="/donate"] { display: none !important; } How might I use this for mobile too?

I ended up solving this by creating duplicate sections, removing the text from one and the image from the other, hiding the original from mobile and hiding the two new ones from desktop.

Site URL: http://www.annauma.ca Password to site is annauma I have used custom CSS to make one block have an image on one side and the content wrapper on the other by using, for example .section-background{ width:50%; margin-left:50%; overflow-y:hidden } .content-wrapper{ width:50%; margin-right:50% !important; } This works great, but on mobile is way too squishy. So I inserted this code for only media with a width of 768 px or higher. The result is the text overlapping the images on mobile, which looks ridiculous, so I tried a content wrapper background overlay, which looks juvenile. Instead, I want to stack the content wrapper on top of the image (instead of side by side) for mobile only, which I tried to achieve with versions of: @media only screen and (max-width: 767px){[data-section-id="6240ea7e62ea482ca10d57dc"] .section-background{ width:100%; margin-top:50vh !important; overflow-y:hidden } .content-wrapper{ width:100%; margin-bottom:50% !important; } But, it seems to vary according to the device. The home page is done and looks fine on MY iphone, but on another person's android, the text runs into the next block. And the bottom margin changing affects the entire rest of the page and squishes up the pictures. Can anyone help me with the CSS to get the content wrapper to stack on top of the background image and stay contained/to scale for the device size on mobile? I'll attach a screenshot of how my phone looks (what i'm after) and how another person's phone looks (no bueno)

Site URL: https://pineapple-giraffe-zll2.squarespace.com/apply Hello! https://pineapple-giraffe-zll2.squarespace.com/apply password: helpwithcss I've searched but can't really figure out the answer. I've done lots of split layouts with image on one side and text on the other. In this case, the gold on the left is a background image, but I also want text on both sides of the layout. I've tried a few things, and the closest I got was using the ID#s of each element and margin-left or right. BUT when I do that, the text doesn't end up side by side. The maroon text goes on the left but is raised, and the black text/email sign up goes on the right but is low. So they're kitty-corner to each other instead of directly side by side. The end result should look like this: Please help! This is making me batty. (also bonus points if you can tell me how to make the email sign up look like the above, with the the submit button replaces with an arrow. I'm less concerned about that)