Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 UTC on 18 March 2024, to get $100 off your ticket.
Hello,
how to use responsive images with bootstrap ?
In my sub-theme I created a file bootstrap_subtheme_front_office.breakpoints.yml here is its contents :
bootstrap_subtheme_front_office.screen-xs-max:
label: screen-xs-max
mediaQuery: 'all and (max-width: 767px)'
weight: 1
multipliers:
- 1x
bootstrap_subtheme_front_office.screen-sm-min:
label: screen-sm-min
mediaQuery: 'all and (min-width: 768px)'
weight: 1
multipliers:
- 1x
bootstrap_subtheme_front_office.screen-sm-max:
label: screen-sm-max
mediaQuery: 'all and (max-width: 991px)'
weight: 1
multipliers:
- 1x
bootstrap_subtheme_front_office.screen-md-min:
label: screen-md-min
mediaQuery: 'all and (min-width: 992px)'
weight: 1
multipliers:
- 1x
bootstrap_subtheme_front_office.screen-md-max:
label: screen-md-max
mediaQuery: 'all and (max-width: 1199px)'
weight: 1
multipliers:
- 1x
bootstrap_subtheme_front_office.screen-lg-min:
label: screen-lg-min
mediaQuery: 'all and (min-width: 1200px)'
weight: 1
multipliers:
- 1x
On drupal in "Image Styles", I created several image styles.
In "Responsive image styles", I created a new style.
I applied "Responsive image styles" to a view.
My problem :
When I reduce my window, the picture style does not change.
Comment | File | Size | Author |
---|---|---|---|
#2 | Capture du 2017-10-10 19-59-56.png | 122.73 KB | zenimagine |
#2 | Capture du 2017-10-10 19-59-12.png | 113.45 KB | zenimagine |
Comments
Comment #2
zenimagine CreditAttribution: zenimagine commentedComment #3
zenimagine CreditAttribution: zenimagine commentedI managed to make it work with :
Comment #4
markhalliwellComment #5
rodtatham CreditAttribution: rodtatham commented#3 worked for me, but I think
mediaQuery: 'all and and (min-width: 992px) and (max-width: 1199px)'
should be:
mediaQuery: 'all and (min-width: 992px) and (max-width: 1199px)'
Thanks so much!