-
Posts
133 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Agha_Waqas
-
css in the <head> of some pages with the transparent header
Agha_Waqas replied to inesgjq's topic in Customize with code
Hi. i just noticed in developer console it shows error. will you double check in the footer section the <script> tag you are using, did you close it like this </script>. due to this markdown code is not working may be <script> //js code </script> and also i see you added the style tag around the JavaScript code. Correct code is below. copy paste below code into header page. remove yours. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h4').addClass('ui-closed').css('cursor','pointer'); $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle(); $(".markdown-block .sqs-block-content h4").click(function() { $(this).nextUntil("h4").slideToggle(); $(this).toggleClass('ui-closed ui-open'); }); }); </script> <style> .markdown-block p { margin-left:1.5em; } .markdown-block .ui-closed:before { font-family:monospace; content:"+ "; } .markdown-block .ui-open:before { font-family:monospace; content:"- "; } </style> -
css in the <head> of some pages with the transparent header
Agha_Waqas replied to inesgjq's topic in Customize with code
Hi. you need to wrap your code with <style> tag. below is a example <style>//Add CSS code here</style> -
Button Element Does Not Appear In Mobile View
Agha_Waqas replied to nickgraham's topic in Customize with code
Hi i just checked your website and it seems like button is exist there but due to background and text color white it show it is missing. you can adjust color from the styles or use below code for it. .header-menu .header-menu-cta a { color: #080d9b !important; background-color: #fe771c !important; border-color: #fe771c !important; } -
it isn't working. please double check on your side.
-
Hi. try this code. .sqs-svg-icon--list { a:hover { opacity: 1 !important; } a:hover .sqs-use--icon { fill: #EF233C !important; } }
- 2 replies
-
- hover
- social-links
-
(and 1 more)
Tagged with:
-
Changing logo size on mobile - 7.0 Wells
Agha_Waqas replied to joe7654321's topic in Customize with code
add below code into CSS editor. and adjust the width according to your needs, @media (max-width: 800px) { .logo { a img { width: 200px !important; } } } -
can you please share the password.
-
How can I remove Anchor element from my website?
Agha_Waqas replied to a topic in Customize with code
Can you please share the website link -
Rounding image corners in my online store
Agha_Waqas replied to NeilER's topic in Customize with code
will you please share the password? -
How can I remove Anchor element from my website?
Agha_Waqas replied to a topic in Customize with code
Hi. you can simply target it from the class name. code: .css-11cewt9 { display: none; } This code will hide the anchor <a> from your website. -
@unavoltaYour welcome
-
Custom Font for Store Titles
Agha_Waqas replied to nicktotallyrelaxed's topic in Customize with code
apply this code into css editor .ProductList-item h1.ProductList-title { font-family: 'Souvenir' !important; } -
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; } } }
-
Issue with Centring Collage Images on Mobile
Agha_Waqas replied to Zanthemum's topic in Customize with code
Hi. Add this code into CSS editor @media (max-width: 600px) { .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic { left: 0 !important; } } -
Hi. Add below code into CSS editor @media (max-width: 900px) { #page-607e58d7db63ee562a23b8e5 { .span-6 { width: 100% !important; float: none !important; .design-layout-card { display: flex !important; justify-content: space-between !important; .intrinsic { width: calc(30% - 1%) !important; } .image-card-wrapper { margin-left: 2% !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 100% !important; width: calc(70% - 1%) !important; } } } } }
-
Hi. I just review your website. you can use below code for it and remove your one. .design-layout-stack { border: 1px solid #000; padding: 10px; min-height: 400px; // adjust min height here to make all block with same height. } and if you want to code the image block where you all ready code add. target the collection id and wrap your code within it. below is a code for the specific page and targets the image block. but this will applied to all type of image style so better way is to use the above code you can try both code and use the code which is best suitable for you. #collection-607e58d7db63ee562a23b8e5 { .Main { .image-block { border: 1px solid #222; padding: 15px; border: 1px solid #222; min-height: 430px; margin: 2px; } } }
-
Can I reduce space between text blocks and styles?
Agha_Waqas replied to Popedesigner's topic in Customize with code
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 } } } -
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.
-
Align text to the bottom on image poster block
Agha_Waqas replied to Sienawalker's topic in Customize with code
Your wecolme -
Align text to the bottom on image poster block
Agha_Waqas replied to Sienawalker's topic in Customize with code
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; } -
Custom CSS Code to optimize newsletter block on mobile
Agha_Waqas replied to ambiancecurator's topic in Customize with code
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; } } } }- 4 replies
-
- css
- newsletter-block
-
(and 1 more)
Tagged with:
-
Custom CSS Code to optimize newsletter block on mobile
Agha_Waqas replied to ambiancecurator's topic in Customize with code
yes we can. attachment is the screenshot how it will looks in one line. If you want it tell me i will send you code.- 4 replies
-
- css
- newsletter-block
-
(and 1 more)
Tagged with:
-
How to hide a scroll indicator on mobile
Agha_Waqas replied to Richardkw's topic in Customize with code
Add this code into CSS @media (max-width: 480px) { .mouse { display: none; } }