Having some spacing issues and logo sizing

[kanaka (Jamison Aweau)]

Hi,

My spacing seems to be messed up on the desktop view (haven’t checked mobile yet) for the heading and the size of the form field.

Attaching a screenshot - you can view it after 15 secs here:

https://vav-staging.dreamhosters.com/home/

Is there also a way to reduce width and radius corners such as this example from another website?

thanks

[Max]

Hi there, @kanaka

I see the issue with the form field height, and I’ve passed it on to the devs. However, everything seems to be fine with the heading on my end:

Could you please specify the screen resolution of your device?

As for the corner radius, I’m not sure which widget you’re using on the 2nd website.

If this is a Popup widget, you can change it in the Background section on the Builder tab:

If this is a Subscription Form widget, you can change it in the Background section on the Appearance tab:

[kanaka (Jamison Aweau)]

Hey Max,

Thanks for the reply –

I noticed the logo shows up correctly on google chrome but not safari so that might be something for the dev team

As for screen resolution, nothing crazy a regular 27" monitor not ultrawide and it shows up on my macbook as well.

for that other example, it was another website probably using a different plugin but it was more of a question around custom styling for you to get it close, (center, shorter width and rounded corners)

Thanks

[Max]

Thank you so much!

I’ve also shared the info about the browser and screen width with the dev team.

Regarding the styling options like in your example, you can use this code in the Custom CSS field on the Settings tab of your widget’s settings to achieve this:

.global-styles,
[class*="WidgetBackground__Container-sc"] {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-radius: 10px!important;
}

Check it out and let me know if you like the result

[Max]

Hi there, @kanaka

We’ve fixed the issue by adding this code to the Custom CSS field on the Settings tab of your widget’s settings:

.global-styles,
[class*="TextControlBase__TextControlBaseInput-sc"] {
  height: auto !important;
}

.global-styles,
[class*="MediaImage__Container-sc"] img {
  width: auto !important;
}

Please check it out and let me know if everything is fine now

[kanaka (Jamison Aweau)]

@Max

.global-styles,
[class*="WidgetBackground__Container-sc"] {
width: 1000px;
margin-left: 400px;
border-radius: 10px!important;
}

So everything works great but I did notice, this code clashes with the Events widget code. So when I add this - it pushes the events widget far to the right side.

Screenshot example:

[Max]

Please try to use this code instead:

.global-styles,
[aria-label="Get the VAV Newsletter"] [class*="WidgetBackground__Container-sc"] {
  width: 1000px;
  border-radius: 10px!important;
  margin-left: auto;
  margin-right: auto;
}

The aria label in the 2nd line of the code contains the name of the widget. If you decide to change the widget name, you should reflect in the code.

Check it out and let me know if it helped