Cornerstone - v2 elements not working correctly

Support
#1

Hi,

Thank you for your great X theme and Cornerstone. I loved them until latest updates. Right now new versions of Cornerstone headlines, buttons, images, rows, columns etc. give me a headache:

Sections, rows and collumns lack of padding controls.
Headlines lack of font weight control.
Buttons lack of border-radius control and box-shadow control does not accept reset to transparent or none - it applies red - take a look at the image below. It DOES NOT react to any “element CSS” field values. How do I add an icon to button?

Images - I tried to force image to take 100% of the screen width - no success. It sets image div container to 100% and forces max-width: 100% for images. Does not matter that I leave max-width control for the image blank or if I set it to 1000%. Adding “!important” to CSS rules gives no effect. It does not react to additional CSS rules either. Image size given in HTML attributes is the final delimiter - no chance to stretch it.

I’ve purged cache to be sure that it is not an issue. I’ve checked it on latest versions of Chrome and Firefox on Windows 10.

That’s just trying to update simple content - I didn’t use all the elements and now I’m concerned about further updates to be honest.

All “classic” versions work great by the way and are much easier and faster to use. If someone knows a bit of CSS, everything can be done. But… for how long will you support classic elements…?

I loved your page builder but its UX dropped from GREAT to REALLY FRUSTRATING.
Elements are out of control now. Seems like there are some predefined styling values that are hard or impossible to override.

Am I missing something? Are there some hidden settings or something?

Please, help me with this.
Thank you very much in advance.

#2

Hi @wbgraphics,

Thanks for writing in.

I believe that this is because of the latest update. We have included a new functionality that controls the settings of the builder.

For more details about the new setting, you could check the link below:

Hope it helps

Let us know how it goes.

Thanks.

#3

Thank you for your reply. It helped a lot. You saved me a lot of nerves.

Nevertheless, I was not able to stretch image to full screen width.
if you use reset button on box-shadow color control or if you delete the color value, the shadow turns red. Please see image below. Fortunately using opacity control makes it transparent.

#4

Hi @wbgraphics

You need to make sure that the row including the image has no margin by clicking on “Remove Spacing” button as in this screenshot:

Regarding the box-shadow reset button, I’ll log this issue to our dev team for further investigation, thanks for letting us know that.

Thanks.

#6

Hi Alaa, thank you for your reply. I did found the “Remove spacing” option with no problem, but prior to Nico’s answer, there was no way to bring them back or change - no control at all. Thanks again Nico :thumbsup:

Please, check also images stretching - I was not able to to this with v2 image element. Classic image element works wery well.

The case is that I do have an image that is about 1800px wide and on Full HD screen it never reaches full width of 1920px. I set its width to 100% via the Cornerstone field and with element CSS field, but it just does not work. It is fixed to maximum original image size. It does not stretch to 100% on screen larger than original image size but if the screen is equal or smaller than the image then it adapts correctly.

The thing is that in v2 image element is wrapped in div with “x-img” class (or similar). the div gets “width: 100%;” CSS value, but the image itself gets “max-width: 100%;” value and it is impossible to override. Unfortunately max-width: 100% means 100% up to the image original size, but no more. Seems like width field value for image is not transferred to the output code. Only max-width value is present.

I’ve purged all caches to be sure, but it didn’t change anything.

#7

Hello There,

In v2 image element, the width and maximum width will be applied to the <div> container with the x-img class. The image inside the container has its own width also which usually the actual size of the image. If you want to change the width of the image, you cannot change the width because the width and height field of the image is not editable. The only way to force the image to be 100% is to use an inline css. Simply go to the “Customize” tab and insert this inline css:

$el img {
  width: 100% !important;
  max-width: 100%;
}

Hope this helps.

#8

Thank you RueNel for your reply.

It will probably help, but I have to say that this is just counter intuitive and image size control far too complicated.
If I’m editing image element, then width and max-width should apply to the image itself not to the container because I as a user would never knew it if I didn’t contact you. If I set up image width with element control and it does not react, then I feel like it is not working, that’s it. Besides if width and max-width were applied directly to the image, the control over it would be more intuitive and accurate for everyone and the container would adapt automatically, wouldn’t it?

I just don’t understand the idea of giving control over image container instead of image itself, knowing how browsers handle images and their CSS properties.

Please, make image controls apply directly to image in image element.

It would be really great to set image width to 100% and get the right image behavior without additional “$el img…” code.

#9

Hi @wbgraphics,

Great points. I will add this to the issue tracker submitted so that they could look on it.

Thank you very much for you patience and we really appreciate your note to make our community and theme better.

#10

Hi Nico. Thank you for your patience with me too :slight_smile:

I work also as a UX/UI designer, so I know that it takes many iterations to make things work correctly and intuitively for the user. Especially if you are producing such a complex tool that Cornerstone is. It looks nice and quite simple, but there’s a lot going on under the hood and EVERYTHING in it is influencing UX. That’s just the way it is wheather we like it or not :slight_smile:

Thank you for your great work!

#11

You’re welcome, @wbgraphics. Glad we could help.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.