You need to sign in to do that
Don't have an account?
Shubham Bansal 45
Can we use media queries in visual force component?
I am using vf component in vf email template. but for the mobile view some UI issue occur,I try to use media query but id doesn't work, can anybody help in fixing this.
Can you elaborate on the issue you are facing with an example so that we can check this further?
Looking forward for your response.
Regards,
Anutej
Actually, I am calling my vf component in vf email template but in the mobile view, it does not appear good and when i try to use media query in vf component, media query doesnt works.
vf component code is as follows:
<apex:component controller="FeedItemEmailWeeklyController" access="global">
<style>
#imgClassGroup{
width:40px;
height:40px;
}
@media only screen and (max-width: 600px) {
#imgClassGroup{
width:20px;
height:20px;
}
}
</style>
<apex:attribute name="QuoteID" assignTo="{!sQuoteID}" type="ID" description="Id of the Case"/>
<div>
<div style="box-sizing:border-box!important;">
<div style="width:80%!important;margin:10px auto;">
<img src="https://testmeenu-dev-ed--c.documentforce.com/servlet/servlet.ImageServer?id=0152v00000I5EY5&oid=00D2v000001dKnf&lastMod=1600147748000" alt="Garzitti logo" height="35" width="180" />
</div>
<div class="acb" style="width:87.5%;height:100px;min-height:10vh;display: flex;
background: url( https://testmeenu-dev-ed--c.documentforce.com/servlet/servlet.ImageServer?id=0152v00000I5EYA&oid=00D2v000001dKnf&lastMod=1601447513000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:auto;
text-align:center;">
<p style="color:white;font-weight:bolder;text-align:center;font-size:1.61vw;margin:auto;">
Weekly Digest
</p>
</div>
</div>
<div style="width:80%!important;margin:16px auto 0px auto;display:flex;">
<div style="text-align:left;margin:0px;width:50%;display:flex;">
<img style="margin: auto 0;display: table-cell;vertical-align: middle;" id="imgClassGroup" src="https://testmeenu-dev-ed--c.documentforce.com/servlet/servlet.ImageServer?id=0152v00000H2Jbv&oid=00D2v000001dKnf&lastMod=1600926299000" alt="Group logo" />
<apex:repeat var="qlt" value="{!FeedItems}" rows="1">
<a href="{!qlt.communityURl}" style="text-decoration:none;padding-left:5px;">
<p>
<apex:outputText style="Font-size:1.46vw;font-weight:bolder;color:black;" value="{!qlt.grpName}" />
</p>
</a>
</apex:repeat>
</div>
<div style="text-align:right;margin:auto 0px;width:50%;">
<div class="newMessage" style="background-color:#40ace8;text-align:center;padding:10px 10px;width:45%;float:right;border-radius: 5px;">
<apex:repeat var="qlt" value="{!FeedItems}" rows="1">
<a style="color:white;text-decoration: none;font-size:0.95vw;" href="mailto:{!qlt.replyTo}?subject=Re:{!qlt.body}-{!qlt.threadId}" target="_blank">Post a New Message</a>
</apex:repeat>
</div>
</div>
</div>
<h1><a name="top"></a></h1>
<div style="width:80%!important;margin:0 auto;">
<apex:repeat var="qlt" value="{!FeedItems}">
<div class="parent" style="border: 2px solid #f2f2f2;padding: 25px 25px 25px 25px; margin-bottom:10px;">
<div style="display:flex;">
<div style="width: 18.30vw;
font-weight: 600;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
margin: auto 0px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;">
<a href="#{!qlt.Feeditm.id}" style="text-decoration:none;font-size: 1.17vw;font-weight: 600;color:#232b2b"> {!qlt.Body}</a>
</div>
<div style="width:13.17vw;margin-left:auto;display:flex;text-align:left;">
<p style="max-width:155px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-right:5px;"><a href="#" style="text-decoration:none;color:#232b2b;font-weight: 500;font-size: 1.02vw;">{!qlt.Feeditm.createdBy.Name}</a></p>
<span style="width:20px;color:dodgerblue;font-size:1.02vw;margin:auto 0;">({!qlt.Feeditm.CommentCount})</span>
</div>
</div>
<section style="padding:0px!important;">
<apex:repeat var="comment" value="{!qlt.commentWrp}">
<apex:outputPanel rendered="{!if(qlt.sizeTrue == 1,true,false)}">
<div style="display:flex;">
<div style="width: 18.30vw;
font-size:1.02vw;
font-weight: 400;
padding: 0;
position: relative;
display: inline-block;
margin: auto 0px;">
<p style="text-decoration: none;overflow: hidden;text-overflow: ellipsis!important;white-space: nowrap;">
<span style="position:relative;vertical-align: middle;height:0.43vw;width:0.43vw;background-color:black;border-radius: 50%;display: inline-block;margin:0px auto;"></span>
<a href="#{!comment.feedCom.id}" style="color: dodgerblue;text-decoration:underline;">
{!comment.comment}
</a>
</p>
</div>
<p style="width:13.17vw;margin-left:auto;font-size:1.02vw;color:#272C35;text-decoration: none;text-overflow: ellipsis;
white-space: nowrap;text-align:left;overflow: hidden;">
<span>
{!comment.feedCom.createdBy.Name}
</span>
</p>
</div>
</apex:outputPanel>
<apex:outputPanel rendered="{!if(qlt.sizeTrue > 1,true,false)}">
<div style="display:flex;border-bottom:1px solid #f2f2f2;">
<div style="width: 18.30vw;
font-size:1.02vw;
font-weight: 400;
padding: 0;
position: relative;
display: inline-block;
margin: auto 0px;">
<p style="text-decoration: none;overflow: hidden;text-overflow: ellipsis!important;white-space: nowrap;">
<span style="position:relative;vertical-align: middle;height:0.43vw;width:0.43vw;background-color:black;border-radius: 50%;display: inline-block;margin:0px auto;"></span>
<a href="#{!comment.feedCom.id}" style="color: dodgerblue;text-decoration:underline;">
{!comment.comment}
</a>
</p>
</div>
<p style="width:13.17vw;margin-left:auto;font-size:1.02vw;color:#272C35;text-decoration: none;text-overflow: ellipsis;
white-space: nowrap;text-align:left;overflow: hidden;">
<span>
{!comment.feedCom.createdBy.Name}
</span>
</p>
</div>
</apex:outputPanel>
</apex:repeat>
</section>
</div>
</apex:repeat>
</div>
<div class="mainContent" style="width:80%!important;margin:0px auto 25px auto;">
<apex:repeat var="qlt" value="{!FeedItems}">
<div style="margin-bottom:10px;border-style:solid;border-color:#f2f2f2;border-width:2px;">
<apex:outputPanel rendered="{!if(qlt.sizeTrue == 0,true,false)}">
<div style="padding:25px;text-decoration:none;color:#232b2b;font-size:1.02vw;background:#f2f2f3;text-decoration:none;">
<div style="font-weight: 600;font-size:1.02vw; color:black;">
<apex:outputText value="{!qlt.body}" escape="false" />
</div>
<div>
<div style="margin-top: 10px;
width: 11.85vw;
background: #13A7EC;
border-radius: 5px;
padding: 10px;
text-align: center;
margin-left:auto;
font-size:0.95vw;">
<a style="color:#FFFFFF;text-decoration:none;" href="mailto:{!qlt.replyTo}?subject=Re:{!qlt.body}-{!qlt.threadId}" target="_blank">Reply to Group</a>
</div>
</div>
</div>
</apex:outputPanel>