function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shubham Bansal 45Shubham 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. 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Shubham,

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 
Shubham Bansal 45Shubham Bansal 45
Hi 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:
Shubham Bansal 45Shubham Bansal 45
<!-- Vf component for feed item Weely template -->
<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>
                   
Shubham Bansal 45Shubham Bansal 45
When I mentioned class in div or any other tag it doest not shows whein I inspect the element