Problem/Motivation

Images do not follow sizes defined on CKEditor because of a CSS rule that overrides them in the content type Blog.

Steps to reproduce

When creating/editing a blog post, add an image and use the CKEditor options to resize the image. You can set the text to be side by side with the image, but when rendering the page, the CSS rule makes the image render using 100% of the width available space.

Proposed resolution

I believe, we can keep the rule to fill 100% of the width in mobile devices, but on bigger screens, the image sizes defined on CKEditor should work.

Remaining tasks

Change styles to change sizes of images only o on mobile devices.

Issue fork openy_carnation-3333851

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mauriciopieper created an issue. See original summary.

mauriciopieper’s picture

mauriciopieper CreditAttribution: mauriciopieper at ImageX commented

I added a rule to only apply the image sizes with 100% width on mobile devices media-breakpoint-down(sm).

mauriciopieper opened merge request !41

froboy’s picture

froboy
he/him
Primary language English
Location Chicago, IL
CreditAttribution: froboy at ImageX commented
Status: Active » Reviewed & tested by the community

This looks good to me. Will flag for @podarok.

froboy’s picture

froboy
he/him
Primary language English
Location Chicago, IL
CreditAttribution: froboy at ImageX commented

I rebased and it looks like there are no conflicts. Prior change didn't have any CSS so we don't have to worry about recompiling.

froboy’s picture

froboy
he/him
Primary language English
Location Chicago, IL
CreditAttribution: froboy at ImageX commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.