-
Posts
133 -
Joined
-
Last visited
-
Days Won
1
Reputation Activity
-
Agha_Waqas got a reaction from Beyondspace in Turn images in summary block into clickthrough links
Ahhhh I see!!! actually there is custom code in css which is blocking it
below is the code which blocked the image clickthrough, Remove below code then it will works
.summary-thumbnail-outer-container a { pointer-events: none !important; cursor: default !important; } -
Agha_Waqas got a reaction from Casselease in 2 column in mobile view
Hi, you can use below code to get rid from the spacing. simply copy paste below code into CSS editor
@media (max-width: 520px) {
#page-section-6079eef730a0cf157bbfc577 {
.span-12 .row {
.span-6 .html-block {
padding: 0 17px !important;
}
}
}
}
-
Agha_Waqas got a reaction from tuanphan in 2 column in mobile view
Hi, you can use below code to get rid from the spacing. simply copy paste below code into CSS editor
@media (max-width: 520px) {
#page-section-6079eef730a0cf157bbfc577 {
.span-12 .row {
.span-6 .html-block {
padding: 0 17px !important;
}
}
}
}
-
Agha_Waqas got a reaction from Wolfsilon in Adding a vector image as a highlight to text
Hi Sam. you can use these vector image (png format) as an background image. Add a text and where you add this effect simply make a bold/italic property for it so you can easily target that one word. Upload each image onto squarespace and get the link.
h2 em {
font-style: none !important;
background: url(// aad link here) no-repeat;
background-size: contain or cover // Use any of this
}
and if you want to add these image specific html block then simple grab the ID of the html-block and wrap above text in it, example below
#Block-id {
h2 em {
font-style: none !important;
background: url(// aad link here) no-repeat;
background-size: contain or cover // Use any of this
}
}
-
Agha_Waqas got a reaction from ab24 in How to resize this image(logo) in the footer section
use this code
#block-yui_3_17_2_1_1621115524816_27495 .intrinsic { max-width: 150px !important; }
-
Agha_Waqas got a reaction from BoulevardNorth in Resizing Form Lightbox Button
Hi. Add below code into CSS editor. Adjust the padding and font according to your need.
.form-block .lightbox-handle { font-size: 20px !important; padding: 1.5em 2.5em !important;}
-
Agha_Waqas got a reaction from tuanphan in Resizing Form Lightbox Button
Hi. Add below code into CSS editor. Adjust the padding and font according to your need.
.form-block .lightbox-handle { font-size: 20px !important; padding: 1.5em 2.5em !important;}
-
Agha_Waqas got a reaction from Guillermiiiin in Social media icon hover color
Hi. try this code.
.sqs-svg-icon--list {
a:hover {
opacity: 1 !important;
}
a:hover .sqs-use--icon {
fill: #EF233C !important;
}
}
-
Agha_Waqas got a reaction from joe7654321 in Changing logo size on mobile - 7.0 Wells
add below code into CSS editor. and adjust the width according to your needs,
@media (max-width: 800px) {
.logo {
a img {
width: 200px !important;
}
}
}
-
Agha_Waqas got a reaction from tuanphan in Custom Font for Store Titles
apply this code into css editor
.ProductList-item h1.ProductList-title { font-family: 'Souvenir' !important; }
-
Agha_Waqas got a reaction from tuanphan in Image Stack on 'Tablet' Size in 7.1
Hi. Add below code into CSS editor
@media (max-width: 800px) {
.design-layout-card {
flex-direction: column !important;
.intrinsic,
.image-card-wrapper {
width: 100% !important;
}
}
}
-
Agha_Waqas got a reaction from tuanphan in Accordion coding not working
Hi, It seem like you did copy paste code and did not update it according to your heading size.
go to you JavaScript and CSS code which you get from that article replace h2 to h4 on both codes (Javascript and CSS)
<----- Updated code -----> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h4').css('cursor','pointer'); $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle(); $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script> Same thing do with CSS replace all h2 to h4. -
Agha_Waqas got a reaction from tuanphan in Can I reduce space between text blocks and styles?
hi. below is a code for this. adjust the margins as you want.
Design > Css Editor.
#page section:first-child {
.html-block {
.sqsrte-small {
margin-bottom: 0 !important; // First line margin adjustment
}
h1 {
margin: 0 !important; // Heading margin adjustment
}
p {
margin: 0 !important; // last line margin adjustment
}
}
}
-
Agha_Waqas got a reaction from tuanphan in Custom CSS Code to optimize newsletter block on mobile
below is the code. please try and let me know if it works perfect for you.
@media (max-width: 480px) {
.newsletter-form-body {
display: flex;
.form-fields {
width: 60%;
.form-item {
width: 100% !important;
min-width: unset !important;
input {
width: 100%;
}
}
}
.newsletter-form-button-wrapper {
width: 40%;
.newsletter-form-button {
padding: 1.4rem 1rem !important;
}
}
}
}
-
Agha_Waqas got a reaction from Sienawalker in Align text to the bottom on image poster block
Hi add this code into CSS editor
.sqs-block-image .design-layout-poster .image-card-wrapper {
justify-content: flex-start !important;
align-items: flex-end !important;
padding: 20px;
}
-
Agha_Waqas got a reaction from sophiaojha in Change a forms "Selection" options font size, Squarespace 7.1
You can use the custom CSS code for it,
Add below code into custom css editor
.sqs-block-form .field-list select { font-size: 20px !important; }
-
Agha_Waqas got a reaction from granthenrymedia in Decrease Margins in Hayden Template Products Page
Your welcome.
-
Agha_Waqas reacted to granthenrymedia in Decrease Margins in Hayden Template Products Page
Super. Thank you so much. I can't tell you how long I was trying to figure this out on my own with a very basic knowledge of CSS! 🙂
-
Agha_Waqas got a reaction from EarvinChong in Decrease Margins in Hayden Template Products Page
upload the image on CSS editor and update the background image link in my code. and adjust the width and height accordingly.
#collection-5fac98f2ff73a225b2353077 {
#content:before {
font-size: 0;
background: url(' // add image url ') no-repeat;
background-size: contain;
width: 100px;
height: 100px;
margin: 0 auto 50px auto;
}
}
-
Agha_Waqas got a reaction from Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template
your welcome. 🙂
-
Agha_Waqas got a reaction from EarvinChong in Decrease Margins in Hayden Template Products Page
add below code and see
#collection-5fac98f2ff73a225b2353077 {
#page {
max-width: 100% !important;
}
#productList {
max-width: 100% !important;
margin-top: 0 !important;
margin-left: 0 !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
width: 100% !important;
.product {
margin-left: 0 !important;
margin-top: 0 !important;
width: 100% !important;
}
}
@media (max-width: 1024px){
#productList {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 620px){
#productList {
grid-template-columns: 1fr !important;
}
}
}
-
Agha_Waqas reacted to Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template
Sweet, that worked! I did have to an !important behind it though. Thanks a ton!
-
Agha_Waqas got a reaction from Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template
hi. you can use below code. add code within your mobile media query
.folder-toggle-label { font-family: "MediumLLWeb-Regular.woff"; }
-
Agha_Waqas reacted to krisTTG in Change a forms "Selection" options font size, Squarespace 7.1
That did it! Thank you so much Agha_Waqas!
-
Agha_Waqas reacted to JMSB in Mobile Customization
Worked perfectly! Thank you so much for your help!