Caroline_Smith

Hi!
This CSS snippet will make all summary blocks  on your home page a 2-column grid at the mobile views. Add it the the Header code injection of your home page to see this:
 
<style> @media(max-width: 768px) { .summary-item-list { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-column-gap: 15px !important; } } </style>  

You could try using the "#page" selector instead. This will cover all links in the main content area, i.e. not the header and footer links.
 
#page a:hover { font-style: italic; color:#990000!important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: #990000 !important; }  

Is Google Chrome up-to-date? If not that, the only other thing I can think of is if you  have custom JavaScript or plugins installed on your site, that can sometimes cause editing conflicts in edit mode. If that's the case, you can disable custom code while editing your site.

You could use the class selector to select .site-tagline. This will ensure only the tagline is applying the CSS rule instead of all paragraphs, unless you wanted all paragraphs to have that font-family then you would just use your initial code snippet.
.site-tagline { font-family: 'Hind' !important; }  

Hey there!
Try using this code block instead:
span.Header-nav-item--folder:last-of-type { background: #fff; color: #243877 !important; padding: 11px 9px !important; } Hope this solves your issue!

If you are using a Squarespace 7.1 site, this will be very easy using a List Section.
Add a Simple List, turn on/off whichever elements you want to include, Set "Space Between Columns" and "Space Between Rows" to 0px Copy & Paste into Design > Custom CSS. You will need to know the page section's "data-section-id" attribute to replace the placeholder with.  
[data-section-id="SECTION_ID_GOES_HERE"] { .user-items-list-simple .list-item { border: 2px solid gray; padding: 46px; } @media(min-width: 574px) { li.list-item:nth-child(2) { border-left: none; border-right: none; } } @media(min-width: 574px) { li.list-item:nth-child(2) { border-top: none; border-bottom: none; } } }  

I'm not sure what's happening, but it looks like when your code is applied, there is an unnecessary space that is inserted (see attached picture). I would try a different way of setting the background color using an rgb or rgba value. Here is what those two options look like (you'll need to play around with the opacity value .6 until you're happy with it):
#block-0db31487a4910b9a8f73 { background-color: rgba(136, 0, 34, .6); padding: 0px; text-align: center; } #block-0db31487a4910b9a8f73 { background-color: rgb(136, 0, 34, .6); padding: 0px; text-align: center; }  
 
 

There's not really a great way to modify the background image with CSS, but a common solution for this issue is to create one desktop section (which you have already done), and then another section right below it that will have a mobile-friendly image (you'll need to create a mobile version for the attached image). Then, you can use CSS to hide and show the appropriate section on desktop and mobile. Here is the code snippet for that. You'll need to know how to find your page section IDs so that you can replace them in the below snippet:
/* Mobile Screen Size */ @media(min-width: 768px) { [data-section-id='{MOBILE_ID_GOES_HERE}'] { display: none; } } /* Desktop Screen Size */ @media(max-width: 768px) { [data-section-id='{MOBILE_ID_GOES_HERE}'] { display: block; } [data-section-id='{DESKTOP_ID_GOES_HERE}'] { display: none; } }  

Hi! It looks like you have some custom CSS that is intentionally hiding these elements on mobile devices. Do you remember what your original intention with this code was (I mean if not to hide those two elements)?
@media screen and (max-width: 1511px) #header .header-menu-nav-item:nth-child(2) { display: none; } @media screen and (max-width: 1511px) #header .header-menu-nav-item:nth-child(3) { display: none; }  

There are more web designers who have more experience with this topic than I do as I've only been in web and UX design for about 2 years, but based on my research, I think people expect to have a visible and static navigation that they can look to for guidance on how to navigate your site in addition to the CTA(s) you have on your homepage, that way as they navigate through your site, they always have a concrete way to find what they need. So I think you don't need the dropdown menu; I think you'd be better off displaying all 6 of your navigation items in the header (and possibly shortening a few of the longer ones into more concise).
Dropdown menus work for some websites, but if you only have 5 single-level menu items as you do on your site, I think it's unnecessarily difficult to have all of them hidden behind a "Menu" item, especially on a desktop when there is no real need to hide them like on mobile devices.
Does that make more sense?

Hi there!
It looks like this is occurring because the plugin you bought is adding a border-bottom to links everywhere instead of only in the timeline. To fix this, you just need to specify that you only want underlines underneath links in the timeline.
Just replace the first CSS rule you pasted above with the following code:
.timeline p a {    text-decoration: none;    color: #AEADAD !important;    border-bottom: 1px solid #edeeef;  }