Not logged in. · Lost password · Register
Forum: General Help and Support Syntax and Usage RSS
Image alignment based on screen size
Avatar
tsom #1
Member since Nov 2012 · 46 posts
Group memberships: Members
Show profile · Link to this post
Subject: Image alignment based on screen size
A lot of times, I may want an image to be right-or left-aligned with text flowing around it. This can be done using the image alignment options:

{{ wiki:dokuwiki-128.png}}
{{wiki:dokuwiki-128.png }}
{{ wiki:dokuwiki-128.png }}

However, often right- or left-aligned images do not look so good when the screen size is small---such as the case on mobile format. In this case, I would prefer for all images to be displayed as centre aligned as default.

Is there a way to force mobile images to always be displayed in centred form?
Avatar
schplurtz (Moderator) #2
Member since Nov 2009 · 460 posts · Location: France, Finistère
Group memberships: Global Moderators, Members
Show profile · Link to this post
You can create your own style in conf/userstyle.css. See https://www.dokuwiki.org/devel:css.

This sets the same style as the "centered media" style to left and right aligned media, on all screens whose width is less than 1024px :
@media (max-width: 1024px) {
  .dokuwiki img.medialeft, .dokuwiki img.mediaright {
    margin: .2em auto;
    float: unset;
    display: block;
  }
}
Avatar
tsom #3
Member since Nov 2012 · 46 posts
Group memberships: Members
Show profile · Link to this post
Quote by schplurtz:
You can create your own style in conf/userstyle.css. See https://www.dokuwiki.org/devel:css.

This sets the same style as the "centered media" style to left and right aligned media, on all screens whose width is less than 1024px :
@media (max-width: 1024px) {
  .dokuwiki img.medialeft, .dokuwiki img.mediaright {
    margin: .2em auto;
    float: unset;
    display: block;
  }
}

Thanks! This seems to work largely like a charm. Quick question though---it seems to be left-aligning it. I assume the 'margin: .2em auto' command should be centre aligning it, but maybe it's because there are other factors due to the level it's at on the page.

I've checked via inspect and the margin commands are active. I've also tried margin-left: auto and margin-right: auto.

Thoughts?
Avatar
schplurtz (Moderator) #4
Member since Nov 2009 · 460 posts · Location: France, Finistère
Group memberships: Global Moderators, Members
Show profile · Link to this post
I assumed you use the default template. Is this the case ?

I've checked via inspect and the margin commands are active. I've also tried margin-left: auto and margin-right: auto.
Hum... If it's a block and the auto margins are active, then it is centered. Maybe, its container is not 100% of the width.

Can you test this and take a screenshot like the one  I attached. make sure the rules are visible and the image margins are highlighted.
Cras semper augue sit amet dui bibendum
{{:wiki:dokuwiki-128.png  }}
Proin tempus felis ac est aliquam condimentum.
{{  :wiki:dokuwiki-128.png}}
Duis eleifend sem vestibulum metus vulputate et sodales erat lacinia.
{{  :wiki:dokuwiki-128.png  }}
Morbi leo mi, pellentesque nec pulvinar a, hendrerit ut libero.
The author has attached one file to this post:
screen.png 578.8 kBytes
You have no permission to open this file.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-08-21, 22:25:03 (UTC +02:00)