Jump to content

Pizzanakin

Member
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Pizzanakin

  1. Oh, I just managed to solve it after doing some more experimenting! For anyone else stumbling upon the same problem, here's how I fixed it: @media screen and (max-width: 640px) { h2.item-pagination-title.preFade.fadeIn { font-size: 0.8rem; } } I got this 'tag' by simply hovering over the html after doing inspect element on my page. This tag appeared over the box in the page display, and I figured I would try this tag. It worked!
  2. https://roadrunner-cod-3bzx.squarespace.com/ I thought that by filling in the URL field it would automatically display in the post. Apparently it doesn't, otherwise I would've added it in the post.
  3. Hey all, I want to use custom css to change some display on my website for the item pagination. On PC they appear just fine, but on mobile the text becomes too large and overlaps. If I make the text smaller, it will appear fine on mobile but it will appear too small on PC. I'd like to change the size for mobile display using custom css. I've already done a bit of researching/experimenting to get it done, but I don't think I've got enough knowledge of CSS to be able to complete it. My main problem is not knowing how to target the right element on the site to change the style. I've got multiple sections where the item pagination is used, and preferrably I'd like to apply this change to all of them at once, instead of targetting each element by it's unique ID. I tried doing so with the following CSS, but it did not provide any results: @media screen and (max-width: 640px) { section.itemPagination h3 { font-size: 0.8rem; } } If someone could tell me the right way to target these elements, that would be much appreciated 🙂
  4. I'm having an issue with the display of my website. Certain site elements in the header of my site are not displaying with the color that they are set to have according to the theme. The most notable example is the drop down list that appears when hovering over elements in the menu. Instead of having the specially defined color for the theme, they will simply appear with the color that's set for the entire background. My site isn't publicly available yet so I can't provide a link, only screenshots. Here are some examples: The image above gives a clear example. According to the theme colors, the overlay should be orange, but instead it shows as blue. After changing the color of the main background, it also changes the color of the background immediately. I noticed that it will always pick the color of the first page in its category. If I select the first element in the dropdown menu, it appears like this: Whereas if I select the second element, it appears like this: While the background color for Bright 2 is set to: So the yellow-ish color that it's using here, does not mean that suddenly it's applying the right color. Instead, it's just still applying the site background color from the 'Geinlijn' page. I'm writing this post here after contacting the Squarespace support. They suggested me to talk about my issue here instead as it is more likely to receive the right kind of attention. They pointed out that the issue might be caused by my usage of custom embed blocks and they suggested me to switch to the default video embedder to solve this issue. However, I'm using vertical videos as a conscious choice. The website is mostly meant for mobile devices, and so I want the videos to be displayed in vertical boxes to make the most use of mobile screenspace. The default method for embedding videos that Squarespace offers gives no option to change the dimensions of the frame. So I figured out a way to bypass this by following this thread: I ended up adding another <div> around the <iframe> in order to align the video in the center, which means the whole block ends up looking like this: <div style="text-align: center;"> <iframe width="315" height="560" src="https://www.youtube.com/embed/-2wUNHK_iIg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> This means the videos are now being displayed pretty much how I like it. That's good. However, it's causing these display issues on the site. The person I was in contact with from support has submitted a feature request on my behalf for vertical videos to be added. And I guess that would be the best long-term solution for this issue. In the meantime though, I'm hoping that maybe someone here can help me out in a less official but still practical solution? Although I don't really know what I'm asking for in this case. Perhaps some way to improve my video embed, so that it would be less intrusive on Squarespace's page template and doesn't cause things to break? If that's not possible, then I will probably just accept the fact that embedding the videos in this manner has this effect on the site's style. And also hope that the Squarespace developers will find time and motivation to work on this feature soon. Thanks for your attention!
×
×
  • 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.