Images getting shrunk in mobile format for inline images- doks theme

Hi Folks,

getting an issue around while publishing inline images from Urls or even local fed inside the content/blog/sample-blog/ directory.

new to frontend, trying to find if there is way to control the dimensions of the image in code. or with replacing some bootstrap element. or the images has to be resized before they get on the blog/.

any suggestions, are appreciated, Thanks

Do you expect anyone to tell you anything useful from taking a look at a distorted image?

Please read and follow the advice of

1 Like

I can :slight_smile: It’s a simple rule that is implemented in that theme half-baked.

proper skaling of images on mobile:

width: 100%;
height: auto;

The theme probably only sets the width, not the height, which leads to applying the default height of the image and “reducing” it to 100% of the available width.

My suggestion is to contact whoever designed that. It’s either the theme’s author or yourself in a CSS addition to the theme.

And for future requests: yeah, at least add a link to your repo or a link to your theme. It feels cumbersome to open Google every time such a question comes up to find out more about your theme.

2 Likes

Thanks @davidsneighbour :heartpulse: I am getting the idea now as for the image issue. we got the doks theme (not updated it yet too) and just started publishing, by just following enough to create blogs and learning as we move.

I am planning to update the theme too. its from last year we picked and never updated since the work was sidelined for almost about an year.

That theme has this code

.content img {
  max-width: 100%;
}

cc @h-enk

Please update your project’s dependencies — no issues then.

For using images in Doks, see the Thulite Images docs

Another useful resource is Doks Discussions