Jump to content

supersizesocial

Member
  • Posts

    21
  • Joined

  • Last visited

supersizesocial's Achievements

  1. @tuanphan Think you could take a look at this? Would hugely appreciate the help
  2. Hello, In my navigation bar I have customized all of the folders and page links to have icons. The 'contact' folder in the navigation bar has a drop down menu so people can contact us via IG, FB, email or phone. I cannot figure out how to put icons next to each of these links. I don't have the code for it because they are in a folder and they are external links not pages. This is the code I was trying to use to put an Instagram logo next to the 'Instagram DM' link in the nav folder: /*Instagram DM */ .header-nav-folder-item [href="https://www.instagram.com/supersizesocial/"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/635e87c54b39565ec8ba2fa4/1667139525562/Instagram+DM.png); background-size: contain; width: 23px; height: 23px; display: inline-block; margin-right: 10px; top: 4px; } I think the issue with this code is that bit at the top: header-nav-folder-item I have also tried to use: header#header Can someone send me the correct code to add an image and make adjustments to these external links that are inside a navigation folder. Furthermore, one of the links is a phone number so people could call us via skype when clicking on it, the other is an email link which will open up their inbox. Perhaps different codes are required for these as they are different kinds of external links. Appreciate any help I can get! Thanks
  3. Can someone help me to input a code that removes an image from my homepage, but only for mobile version. Check my homepage: supersizesocial.com The first thing you see at the top is our big logo next to the website title / subtitle. This is just a simple image block next to a text block. The image is our logo. It looks great on desktop but on mobile the logo appears underneath the text and doesn't look very good. I think it's best to just remove this logo image on mobile version all together. Can someone provide code on how to do this? When I try to remove it on the mobile version editor, it removes it on both mobile and desktop. Am I doing something wrong?
  4. Site URL: https://www.supersizesocial.com/ I have 2 folders in my navigation bar 'instagram growth' and 'instagram powerlikes'. Both of these folders have several options that link to other pages. I just need the folders themselves to have small icons next to them. I can add the image myself I just don't know the code to put an image in the first place. There is also another link 'customer hub' - this is a membership area via an external platform. I'd like to put an icon next to this as well and do something else to it to make it stand out a bit more such as making it bold. Or even better just turning the 'customer hub' link into a button (already used up my button for a different page!). Appreciate any help I can get!
  5. Site URL: https://supersizesocial.com On my website home page the first thing you see is a "Get Started Now" button. This button will take you further down the page to the "top selections" so that you can checkout the main services we offer. This works great for Desktop users. However, for mobile users it doesn't flow so well. I think for the mobile version only it would be way better if it just took you to the Navigation Menu when tapping on the "Get Started Now" button. Can anyone help with this?
  6. Hi Tuanphan! Very glad to hear from you haha I need your expertise once again. Yes I need the "Supersize Social" logo removed and the image of a hand holding an iphone removed, from mobile only. As you can see, it looks fine on desktop but on mobile it looks terrible so it's best to remove it and keep it as simple as possible on mobile. The 'supersize social' logo is just a normal image. The iPhone / hand is a heading block that has a block of text overlapping the image.
  7. Hi mate, Great thanks for your help! Attached is two screenshots of how it looks on mobile and how it looks on desktop. The images to be removed for mobile are the "SUPERSIZE SOCIAL" logo and the hand holding the iphone https://www.supersizesocial.com/powerlikes-demo
  8. Site URL: https://www.supersizesocial.com/powerlikes-demo/ Squarespace doesn't let you edit the mobile version separately to the desktop version which can be very inconvenient sometimes! I've just made a new simple landing page, as you can see it looks fine on desktop. But if you shrink your browser or open it on mobile it looks terrible. The simple solution for this would be to remove the two images from the mobile version, they aren't important anyway but on desktop they are important to fill out the page. The images are the logo at the top of the page, and then below the hand holding an iPhone. Can anyone help me with this? Is there a line of css code that will remove the images for mobile only?
  9. Site URL: https://www.supersizesocial.com/powerlikes-demo/ I am making a simple landing page without a navigation bar. It just has our company logo at the top. On Desktop it looks pretty good, the logo is not to big and set off to the top left of the screen. However, on mobile it is very large! The way I made the logo small and on the top left was by uploading it as an image, then putting a spacer to the right of it and stretching the spacer all the way across to the left so the logo shrinks down as it is pushed to the far left. If you open the page on desktop and slowly shrink your browser, you'll see at some point the logo suddenly gets really big and centred. Can anyone help me resolve this? Perhaps some basic CSS is required, I unfortunately know almost nothing about CSS Any help would be greatly appreciated!
  10. It's absolutely perfect now! Appreciate your help so much buddy thank you. Check it out: https://www.supersizesocial.com/
  11. amazing! This is what I've got now, have put my own icons. /* Instagram Power Likes */ .header-nav-folder-item [href="/powerlikes"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b458a1c3e55c3d012a73/1628681304615/Rocket+icon.png); background-size: contain; width: 15px; height: 15px; display: inline-block; margin-right: 5px; } /* Instagram PowerComments */ .header-nav-folder-item [href="/powercomments"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4622aea584297d577c7/1628681314972/Comments+Icon.png); background-size: contain; width: 15px; height: 15px; display: inline-block; margin-right: 5px; } /* Instagram PowerStories */ .header-nav-folder-item [href="/powerstories"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4697eb41e137050e495/1628681322043/Powerstories+Icon.png); background-size: contain; width: 15px; height: 15px; display: inline-block; margin-right: 5px; } /* Instagram Giveaway Growth */ .header-nav-folder-item [href="/instagram-growth"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45b47dc61687594d983/1628681308023/Promotion+Icon.png); background-size: contain; width: 18px; height: 15px; display: inline-block; margin-right: 5px; } /* Content Creation */ .header-nav-folder-item [href="/social-media-management"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b466fd52fd239ac0c13c/1628681318757/Content+Creation+icon.png); background-size: contain; width: 18px; height: 15px; display: inline-block; margin-right: 5px; } /* Blue Badge */ .header-nav-folder-item [href="/blue-badge"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45f9f149c7edca64961/1628681311546/blue+badge+icon.png); background-size: contain; width: 15px; height: 15px; display: inline-block; margin-right: 5px; } It's starting to really come together now thanks so much! A few more little tweaks and I'll be done I think! Is there a way to slightly lower the icons so they are more inline with the text? They are just a bit too high. If I do this then I think I can also make them a bit bigger as they'll have a bit more space. The last thing I really need to do is align each option in the drop down menu to the left, right now they are aligned to the right for some reason. Can't find a way to change this outside of using code. Think it'll look much better this way. Thank you so much once again!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.