loren1

Hey,
 
I have several gallery slideshows on my website, all looks fine on desktop but on mobile you can only see. small slither of the centre of the photo/slideshow. Is there a way I can fix this?

It works perfectly! Thank you so much for the super-quick response @creedon!

Add the following to Design > Custom CSS.
/* begin alter donate button */   body:not( .button-style-default ).primary-button-style-solid .site-wrapper:not( .with-button-variants ) #block-yui_3_17_2_1_1648508980957_2756 .sqs-editable-button:hover {        opacity : unset;          }        .primary-button-style-solid .dark-bold #block-yui_3_17_2_1_1648508980957_2756 .sqs-button-element--primary:hover {        background-color : red;     color : green;          }        /* begin alter donate button */ This is for v7.1 and specific to the poster's need.
Let us know how it goes.

It works now! Thanks so much for your help mate, I appreciate it!

Try this new code
<style> a.eventitem-backlink:after { content: "" !important; background-image: url(https://images.squarespace-cdn.com/content/v1/60173d3fc360987af4f8010f/1b5bebad-dc6c-431c-89aa-e1957163fe6d/Uncaged+Banner+FB.jpg?format=750w); background-size: contain; margin: 0 auto; background-position: center center; width: 100% !important; display: block; height: 300px !important; background-repeat: no-repeat; transform: unset !important; position: static !important; background-color: white !important; } a.eventitem-backlink { display: block; } a.eventitem-backlink { background-color: white; } </style>  

Add to Design > Custom CSS
article.eventlist-event { border-bottom: 1px solid black; padding-bottom: 60px; }  

Hi,
Q1. Add to Design > Custom CSS
/* event list page */ h1.eventlist-title { font-size: 40px !important; } article.eventlist-event { display: flex; align-items: center; flex-wrap: wrap; } .eventlist-excerpt a { background: black; color: white; padding: 10px; } .eventlist-excerpt a span { text-decoration: none !important; } Q2. Add to Design > Custom CSS
/* event details page */ .eventitem { flex-direction: column; justify-content: center !important; align-items: center !important; } .eventitem>div { flex: 1 0 100% !important; width: 100% !important; padding-left: 0; box-sizing: unset !important; text-align: center; }  

I also found this at Coinbase:
https://commerce.coinbase.com/
It seems easier to use than Blocknomics, has a more professional look to it, and there are more crypto options like ETH and USD-Coin.

Use this code
[data-section-id="abcxyz-123-enter=id-here"] .section-background { background: #ff0000 !important; }  

Hi,
Try the above from another poster tuanphan...the CSS works well for me

Add to Home > Design > Custom CSS
.variant-select-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } .variant-select-wrapper option { font-size: 30px; }  

Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { .products.collection-content-wrapper .nested-category-title { text-align: center !important; justify-content: center; } }  

That works @tuanphan! THANK YOU so much, you are amazing.

There is no automatic way to do this. You will need to use code manually for each projects. Add this to Design > Custom CSS
/* Stories portfolio page */ body#collection-618c573df5f4675a880adfb8 { a.grid-item:after { display: block; position: absolute; bottom: -30px; width: 100%; } a.grid-item[href="/stories-2/ralph-dimarco"]:after { content: "enter text 1"; } a.grid-item[href="/stories-2/jesse-tobin-mccauley"]:after { content: "enter text 2"; } a.grid-item[href="/stories-2/loren-depalma"]:after { content: "enter text 3"; } a.grid-item[href="/stories-2/bruce-horan"]:after { content: "enter text 4"; } }

Add to Design > Custom CSS
a.nested-category-breadcrumb-link { font-family: 'Norwester'; }  

Add to Design > Custom CSS
/* Portfolio hover */ .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; z-index: 10000; opacity: 0; } a.grid-item { position: relative; } .grid-item:hover .portfolio-text { opacity: 1; } .grid-image-inner-wrapper:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; } .portfolio-text * { color: white !important; } .grid-item:hover .grid-image-inner-wrapper:after { opacity: 1; }  

Hi Holocene_X, 

I am looking to duplicate just a section within a page, not the whole page. This solution worked great with anything before 7.1 because made use of Indexes, and each "page" was a section, but I am looking to duplicate that experience with 7.1 and am not finding a way, and replicate just certain sections more quickly across several pages. 

(Unless I'm totally missing something, and Indexes are able to be replicated in some manner in 7.1)

Hi
You didn't provide a link to your site so I can't test it for your situation, but try adding something like this to Design > Custom CSS:
/* Flatiron: Add 8px white space between index items */ /* set the white space on each side of page */ #container-content { padding-left: 8px!important; padding-right: 8px!important; } #grid .item { margin-left:-8px; a { border: 16px solid #fff; } /* Overlay size on hover */ .wrapper { margin: 16px; } }   Paul