Hår Styling

[Giovanni Sealy]

MeetAire 360, air styling's newest breakthrough. Designed with high-performance heat and first-of-their-kind ceramic attachments, Aire 360 styles bouncy blowouts and lasting curls with zero heat damage.*

I'm working on building new pop-ups for our website using the new CTAs that are available. I have a few built and published to pop up on desktops. But I had to exclude them from popping up on mobile devices because the pop-up doesn't resize with the screen enough. When previewing it in the editor, it looks perfectly fine for the mobile screens. But when I look on my phone it looks bad. In the preview, it mentions that responsive styling is not enabled with a link to "Enable responsive styling". Clicking the link just brings me back to the editor with no options I can find to enable it. Is there a way to solve this?

I see that you are using the BETA CTAs tool and that you are running into an issue sizing the CTA appropriately for smaller screens. You have assessed correctly that we do not currently have a way to adjust for smaller screen sizes in the editor.

At the moment this responsive layout option would need to be custom coded which you can read more about at the link above. I can certainly pass feedback on to the team to let them know that it would be helpful to be able to add this functionality to the drag and drop editor.

The only solution we were able to come up with was creating a second pop-up for each of the campaigns, setting those to show only on mobile devices and resizing them to fit only on small screens specifically. So for example, we have a vehicle loan pop up that fits perfectly on a desktop. I took and cloned that pop-up and resized it to fit a mobile device, from there in the settings I excluded desktop devices and set it to show on mobile and tablets. I then went to the settings of the Original pop-up and set it to not show on small screens and went ahead and made an exclusion rule for mobile and tablets for extra measure. It's a bit of extra work to do the tracking, otherwise, they work well now.

@DianaGomez ok, so I have some screenshots now to share what we're looking to accomplish, compared to what we're getting. Our graphic designer did convert the image to SVG and I have some images of the results of that as well. She is going to have to figure out some weird effects that happened when she converted it, the words got jumbled together. But, as far as the image scaling to fit the container better, there was no real effect.

This image is a screenshot of the mobile preview from the HubSpot editor of the background image being resized to fit the entire image in the CTA. We can tolerate how this one has the small amount of space above and below the image but would prefer not to have it.

This image is a screenshot of the mobile preview from the HubSpot editor of the background image being resized to fill the container. We are hoping to have our mobile CTAs look more like this one but with the words and logos not being cut off.

This image is a screenshot of a live shot of the CTA as seen on my phone with the background image being resized to fit the entire image in the CTA. Notice that it creates an even bigger space above and below the image as well as squishing the form into a single column and placing it in the middle of the CTA, blocking some of our text, rather than at the bottom.

This image is a screenshot of a live shot of the CTA as seen on my phone with the background image being resized to fill the container of the CTA. Formatting the background like this cuts out a lot of the image as well as squishing the form into a single column.

This is the desktop preview from the HubSpot Editor of the CTA after converting the image into a .svg format. For the Desktop view, the only change was slight color darkening and the text being jumbled around. As mentioned above, our Graphic Designer will be working to figure that out when she has time.

This image is the .svg image live as a mobile CTA as seen on my phone, using the setting "Resize to Fit Entire Image." It shows that the scaling didn't really change between the .jpeg and .svg images.

This image is the .svg image live as a mobile CTA as seen on my phone using the setting "Resize to Fill Entire Container." Like the image above, it shows that the scaling didn't really change between the .jpeg and .svg images.

Thanks for the response. I have that option selected already for my CTAs. I did realize that having the image set to fill the container was part of my issue of making the CTA cut out words and other parts of the image. I currently have our graphic designer working on resaving the images as svg. rather than jpg. to see if that will help the image scale better when using that option. Because doing "resize to fit full image" leads to a bunch of empty space I don't want on the top and bottom of the image. After I get the svg. version of the images and try again I will post an update with screenshots.

Whether you want to tame frizz, create volume or define curls, you can put the finishing touch on your look with our inclusive range of clean and conscious styling products for all hair types and textures. Our cruelty-free stylers are made with Certified Organic and natural ingredients such as sustainably sourced honey, aloe vera, coconut, Pink Himalayan salts and other pure botanicals that nourish, protect and maintain straight, wavy, curly, or coily hair. Clean chemistry and quality ingredients help you achieve salon-quality styling at home. If you're looking for the best hair spray for medium to strong hold, look no further than I Create Finish, our clean, propellent-free workable finishing spray. Enhance texture and boost volume with our Salt Spray for beautiful beach waves. Prolong your style between washes with our innovative foam-to-powder Refresh Dry Shampoo, which effectively absorbs excess oil and grease without leaving a white cast or residue. Browse our styling products and find a new favorite way to smooth hair, create shine and boost volume.

Create the salon-level blowout of your dreams and keep it going for days with our lightweight blow dry cream for smooth, heat styled perfection. This silicone-free award winner is uniquely designed to lock your style in place with our innovative, heat-activated formulation while defending your hair from blow dryer, curling iron, flat iron or any other styling heat up to 450. Perfect for all hair types, especially those concerned with frizz control, heat styling and heat protection.

Water/Aqua/Eau, Glycerin, Cetearyl Alcohol, Hydrogenated Farnesene*, Cassia Hydroxypropyltrimonium Chloride, Saccharomyces Cerevisiae Extract, Brassicamidopropyl Dimethylamine, Squalane, Caprylic/Capric Triglyceride, Cymbidium Grandiflorum (Orchid) Flower Extract, Panthenol, Hydroxypropyltrimonium Lemon Protein, Cetearyl Olivate, Tocopherol, Sorbitan Olivate, Leuconostoc/Radish Root Ferment Filtrate, Ethylhexylglycerin, Aspartic Acid, Sodium Gluconate. Fragrance/Parfum**

FYI Answer style not working is still an issue. Have 2 cards with identical styling and one of them does not work, also does not work in the Preview when I change the styling. I also imported the cards as in that example and it is an issue for old cards.

Our clean haircare collection offers two standout styling formulas. The first is Prickly Pear Hair Oil, a multipurpose hair treatment and styler that strengthens, softens, detangles, prevents breakage, and fights frizz with a blend of moisturizing prickly pear seed oil and keratin-producing moringa leaf extract. The second is Cactus Flower Leave-In Conditioner, a restorative, leave-in styler and conditioner that protects against heat up to 450F and leaves hair feeling soft and bouncy with desert botanicals like cactus flower extract and prickly pear oil.

When I released emoji-picker-element last year, it was my first time writing a general-purpose web component that could be dropped in to any project or framework. It was also my first time really kicking the tires on shadow DOM.

In the end, I think it was a natural fit. Web components are a great choice when you want something to be portable and self-contained, and an emoji picker fits the bill: you drop it onto a page, maybe with a button to launch it, and when the user clicks an emoji, you insert it into a text box somewhere.

The basic idea is that CSS variables can actually pierce the shadow DOM. No, really! You can have a variable defined at the :root, and then use that variable inside any shadow DOM you like. CSS variables at the :root are effectively global across the entire document (sort of like window in JavaScript).

However, it would be pretty awful if you had multiple web components on your page, and each of them had generic-sounding variables like --background that you were supposed to define at the :root. What if they conflicted?

I think this makes sense for a design system, where multiple components on a page may want to reference the same variable. But for a standalone component like the emoji picker, I opted for a different strategy, which I picked up from Ionic Framework.

Here is a simplified example of how Ionic is doing it. Below, I have a foo-component and a bar-component. They each have a different background color, but both are styled with the --background variable:

But now, if I ever decide to define the padding some other way (e.g. through width or implicit positioning), or if I decide I actually want a wrapper div to handle the padding, I could potentially break anyone who is styling with the ::part API. Whereas with CSS variables, I can always redefine what --emoji-padding means using my own internal logic.

3a8082e126