mjml


Responsiveness in MJML <mj-attributes>


When using MJML to create the email templates, it provides the carousel feature in email templates. Here is the code from the their sample. (icon-width and tb-width were added by me)
<mj-carousel icon-width="30px" tb-width="20px">
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3#1x.png" />
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1#1x.png" />
</mj-carousel>
As you see, the attribute tb-width controls the width thumbnails of the carousel, I want to change the value of tb-width to be smaller when it goes into mobile screen, otherwise I will have to stick to one value cross all screen sizes.
I tried this:
#media all and (max-width: 480px) {
[tb-width] {
width: 50px !important;
} // this is not working
}
Then I tried this based on the official document
#media all and (max-width: 480px) {
div[style*="tb-width:20px;"] {
width: 300px !important;
}
}
None of above code works.
How do you guys solve this problem? Thanks in advance.
Thanks for #dermothghes from mjml slack channel, here is the solution:
All these mjml components will have a corresponded css class in the outputted HTML, what we need to do is to compile the .mjml file first and find the corresponded css class from the output.
In my question, this should work:
#media all and (max-width: 480px) {
.mj-carousel-thumbnail {
width: 50px !important;
}
}
.mj-carousel-thumbnail is the generated class from mj-carousel-thumbnail mjml component.

Related Links

Responsiveness in MJML <mj-attributes>

Categories

HOME
github-for-windows
opendj
javacc
xbee
jetty
title
extjs4.2
syntaxnet
fhir
zerobrane
flash-player
atlassian
symbol
standards
intershop
dreamweaver
red5
mapstruct
jmp
topology
database-connection
ag
dpdk
question2answer
ios10.2
qliksense
jquery-callback
onload
entity-relationship-model
mockjax
code-snippets
contacts
instantiation
processwire
google-knowledge-graph
protein-database
chef-solo
spring-mvc-test
hackintosh
visa
wc
apache-spark-dataset
dbcontext
activeperl
posixct
google-cse
sundials
dt
monkey
universal-analytics
rsa-archer-grc
vcloud-director-rest-api
nikeplus-api
pre-build-event
nservicebus5
ellucian-scribe
exim4
asyncdisplaykit
morton-number
sapscript
teamcity-9.1
broadband
nodelist
execve
with-statement
getopt
cffile
ui-select2
cardreader
twisted.web
asplinkbutton
resource-management
qtconcurrent
httponly
infobright
multiplatform
mbeans
object-database
lobo-cobra
mathematical-notation
interop-domino
contentpresenter
movieplayer

Resources

Encrypt Message