Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

supersizesocial

Member
  • Posts

    11
  • Joined

  • Last visited

  1. 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?
  2. 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.
  3. 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
  4. 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?
  5. 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!
  6. It's absolutely perfect now! Appreciate your help so much buddy thank you. Check it out: https://www.supersizesocial.com/
  7. 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!
  8. Okay great! Think I'm learning more how this works now thanks so much. The only other thing I'd really like to do now is to have icons for each one. Each icon will be the colour of the 'get started' button so will need to use exact colour code. Each icon will need to be a different symbol related to the service. Are you able to do that? Might be easier if I can change the symbols myself but not sure how it could work. Thanks so much for your help really appreciate this.
  9. That's super helpful thank you so much! https://www.supersizesocial.com/ I had a play with the colours and shadow in the code you made, looks much better now thanks! Will keep playing around with it. /* nav on hover */ div.header-nav-item a:hover { opacity: 0.5; } /* space between dropdown items */ .header-nav-folder-item { margin-bottom: 10px; } /* dropdown border shadow */ .header-nav-folder-content { border: 1px solid white; border-radius: 3px; box-shadow: 1px 3px 10px black; } I would like to remove the line of shadow at the top of the drop down box, any idea how to do that?
  10. Site URL: https://www.supersizesocial.com/ SquareSpace navigation menus can be very limited especially when you require a drop down menu! I really need some help customising mine, if anyone can provide me with a custom code or any kind of solution that would be so awesome. Willing to pay a one off fee for a solution that I can play around with and customise myself, which creates a final code for me that I can add to the website. Here is my website: https://www.supersizesocial.com/ If you hover your mouse over the 'instagram services' and 'social media marketing' drop downs to see how it currently looks. I'm sure you'll agree with me that it's very tacky and basic! Here are the customisations I would like to make: - I would like a hover effect for the entire navigation bar and for the options in the drop down. Just a simple effect that makes the text faded or the background space behind the text faded. This would make the navigation bar a bit more dynamic. - The space around each option in the drop down menu is very small and the options are cramped together too much. No way of increasing this space. - The plane white drop down box is very boring and tacky. Some colour around the edge or at the top would be great. Also a shadow effect and / or transparency effect would work well. Also, rounded corners would be nice. - This plane white space is actually too big, if you see in the 'social media marketing' drop down there is too much space on the left of the text. - Some icons next to each option would be amazing! Any help would be greatly appreciated!
×
×
  • Create New...