Ashelle

Thank you!!

Thank you!!

Site URL: https://www.myartbeatflorals.com/about

So I spent hours perfecting one little section on my site yesterday, to where it would look right in both desktop and mobile view. Got it perfect through sheer luck, because I know nothing about coding. 

Then I happened to look at the tablet view this morning. Ugh. 

I need help knowing how to keep the desktop and mobile layouts the way they are, but fix the cut-off title and the uneven color block showing on tablet view. I just know if I go and try to fix it I'm going to screw up what I perfected yesterday. 

I've attached screeshots of desktop and mobile (which are great), and the changes I need to make on the tablet view. 

https://crow-grey-dnt6.squarespace.com/config/

I figured out #1.

I still haven't figured out #2 or #3.

The random "}" is sitewide on every page at the very top left.

The FAQ page is linked below but there's nothing to screenshot other than the snippet of coding I shared above. Links within my markdown section just don't open in a new window. 

https://crow-grey-dnt6.squarespace.com/faq

Never mind, after hours of tweaking and throwing in codes, by pure chance I figured it out. 

I'm trying to do this same thing, but in using this code I cannot figure out which ID blocks I'm supposed to use I guess, because it's not working. Am I doing something else wrong? I just want to close the gap between the two text boxes in mobile view. 

http://www.myartbeatflorals.com

Site URL: http://www.myartbeatflorals.com

Three things...

One is that on mobile view, all pages have words hyphenated due to lack of space. Is there a code I can use to just bump the word down to the next line instead?

Second, in my FAQ section I have it set to open my links in a new page, but it doesn't. Here's a snippet of my markdown coding for that: 

### • **DO YOU OFFER ANY DISCOUNTS OR PACKAGES?**
I offer a 10% photography discount, which you can read about and apply for [here][9].

[8]: https://www.jotform.com/ashellepack/10-photography-discount
[9]: https://www.jotform.com/ashellepack/10-photography-discount

I do not currently offer package deals. I have found that most couples' needs do not fit any one package. All of my items are priced à la carte, so you can get exactly what you need - no more and no less!
<hr>

And third, I have a "}" showing up at the top of my site. Not sure how to remove it. Here's my current custom CSS:

//subtitle under logo//
a.Mobile-bar-branding:after {
    content: "SOLA WOOD | SILK | PRESERVED";
    display: block;
    margin-top: 20px;
    font-size: 8px;
    font-family: futura-pt;
    color: #A0A0A0;
}

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
}

  
  //remove space at bottom of site on mobile//
.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}

/* tagline overlap */
a.Header-tagline {
    line-height: 1.2em;
}
}
/* Tagline on mobile */
a.Mobile-bar-branding:after {
    content: "Sola Wood | Artificial | Dried | Preserved";
    font-family: futura-pt;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    letter-spacing: .2em;
    line-height: .5em;
    text-transform: uppercase;
    color: rgba(124,121,121,.5);
    display: block;
}

And if possible I would prefer the tagline stay all one line and not go to a second line. Not sure if that's what the code is doing or just giving it room for a second line, but if I do that I would think there'd be extra blank space underneath it on the larger screens. 

That's not doing anything for either view. But my existing coding says that I'm "missing closing '}' ".

Could that be preventing other codes from working? I have no idea where another '}' needs to go. 

Here is my current coding:

//subtitle under logo//
a.Mobile-bar-branding:after {
    content: "SOLA WOOD | SILK | PRESERVED";
    display: block;
    margin-top: 20px;
    font-size: 8px;
    font-family: futura-pt;
    color: #A0A0A0;
}

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
}

  
  //remove space at bottom of site on mobile//
.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}
  /* tagline overlap */
a.Header-tagline {
    line-height: 1.2em;
}

Site URL: https://www.myartbeatflorals.com

My tagline below my logo is a single line on my large desktop monitor, but on my laptop it's two lines overlapped. And it doesn't show up at all on my iPhone. 

Any codes to fix this? Please be specific about what I need to put where...I'm limping my way through this code stuff. 🙂

Worked perfectly! Thank you!

Whoops sorry, it's www.myartbeatflorals.com and it's public. 

This is exactly what I'm looking to do, but I am not knowledgeable enough in Javascript to know what personalized text I need to insert within the code provided. Could you or someone take a look at my page? I'm wanting "Sola Wood | Artificial | Dried | Preserved" to link to my "About" page. 

I have just gone ahead and picked different fonts for the quote blocks. I feel that it would be a hassle to customize each and every quote I have on that page, especially if I will be switching out quotes periodically. 

Just now, Ashelle said:

I have seen that, but it just says it needs a closing and I cannot figure out where the closing needs to go. I'm completely ignorant in coding...

Here's what I have:

a.Mobile-bar-branding:after {
    content: "SOLA WOOD | SILK | PRESERVED";
    display: block;
    margin-top: 20px;
    font-size: 8px;
    font-family: futura-pt;
    color: #A0A0A0;
}

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
}

  //remove space at bottom of site on mobile//
.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}

4 hours ago, tuanphan said:

Your Custom CSS box has a syntax error, all CSS or some CSS won't work properly. You can fix it first.

If you look at the bottom right corner in Custom CSS, you will see a red notice

I have seen that, but it just says it needs a closing and I cannot figure out where the closing needs to go. I'm completely ignorant in coding...

On 5/16/2021 at 3:48 AM, tuanphan said:

Hi. Can you share link to page where you added quote block? We can check easier

I have only added one quote thus far, but there will be quotes throughout that page in the blank spaces. 

https://www.myartbeatflorals.com/testimonials

Site URL: http://www.myartbeatflorals.com

Hopefully this is my last question, as my website is basically done: I want to customize my quote fonts only on my Testimonials page. I have a quote already on my home page, which I'd like to stay as is. I have already uploaded the custom fonts, but don't know the CSS code to make it apply exclusively to that one page. I will have several quote blocks on the same page with the same two fonts. I considered making a Word document into a PDF and embedding it, but that puts a gray space around the document and I don't want that. If there's a way to avoid that, it would probably be easiest. 

Otherwise....For the quoted portion, I want it to be Eras Medium ITC (ErasMediumITC.ttf) in 11 pt. The source, I want to be Ink Free (inkfree.ttf) in 12 pt. I am not picky on animation...anything that looks good with multiple quotes, or none at all. 

What code would accomplish this? I've attached a photo of how I want the quote to look (the source being indented would be nice, but not necessary).

9 hours ago, tuanphan said:

Remove above & add this to Settings > Advanced > code Injection > header

Perfect! Thanks so much!

5 hours ago, tuanphan said:

Add to Design > Custom CSS

 

I pasted all that and it didn't seem to change anything. 

Site URL: https://www.myartbeatflorals.com

So I have a gallery page with "albums" of various weddings and styled shoots I've done. I want only one main image to be seen initially, and ideally I'd like to be able to click into a larger gallery (where you can see all photos) and then click on each image to view it larger (like a lightbox). Currently I'm using the slideshow view without thumbnails...but the images are so tiny and there's no way to see them all at a glance or zoom in. Any coding or hacks that could get me this look? I see photography pages with it all the time. I'm using the Sonny template. TIA!

On 5/9/2021 at 5:18 AM, tuanphan said:

I see the site has some small problems. Do you want to fix these?

Sure, if you can give me the exact codes lol. It takes me forever to find the right coding, and I've kinda let the tablet view go by the wayside.

@creedon that worked, thanks!

Site URL: http://www.myartbeatflorals.com

I recently watched a tutorial on how to create a collapsible/accordion FAQ page. Worked great...except I just discovered it does not appear as collapsible when I visit my website as a visitor would...on desktop or mobile. In edit/dashboard mode, it works as it should.

Here is the code I used:

<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 h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

And a portion of the customized markdown code I used:

### **HOW LONG WILL IT TAKE FOR MY FLOWERS TO BE MADE?**
While this depends on how many items you order, I typically request a minimum of 8 weeks to complete your flowers. My calendar always fills up quickly each month, so the earlier you book, the better!
<hr>
### **HOW FAR IN ADVANCE CAN I ORDER MY FLOWERS?**
Everything I create is either wood, silk, fabric, dried, or naturally preserved. This means you can order several months in advance without worrying about wilting or decay! Just keep the flowers in a dry, cool place out of moisture and direct sunlight, and your arrangements can last for years!
<hr>