Changes made to the page are visible when we preview in the page designer but not in the portal view

[sai shruthi]

Hi,

I have made changes to an instance of Homepage Search widget.

Changes made:

Reduce the width of the input and button classes using CSS.

Updated Script:

form {
height: 46px;
width:550px;
border-radius: $sp-space--sm;
}

button {
height: 44px;
width:50px;
color: #717171;
box-shadow: none;
border-bottom-right-radius: $sp-space--sm;
border-top-right-radius: $sp-space--sm;
}

input {
box-shadow: none;
width:500px;
font-size: 16px;
font-family: inherit;
color: $text-tertiary;
padding: $sp-space--md;
height: 44px;
border-bottom-left-radius: $sp-space--sm;
border-top-left-radius: $sp-space--sm;
}

I am able to see the changes in the page designer but not in the ESC portal. Please refer to the attached images. I have tried the same in my PDI , the changes are reflected in portal.

[Dan O Connor]

First thing to note is that sometimes ESC caches too well, especially on Chrome browsers. It can be worth impersonating another user after doing a significant design change to ensure its the latest version you are seeing.

After that, it is likely there is bootstrap overrides happening on the widget. 

Widgets live in instances. 

Instances are in containers.

Containers are in columns and rows.

Review up the layers from designers to see if there is CSS being applied at the higher levels, which in turn is going to override your widget.

Also ensure the CSS changes you are making, as on the instance of the widget, not the widget itself. 

[Akansha Gupta]

hi @sai shruthi - have you found the reason for your query?