Making icon invisible in WordPress help

@ferforjeApr 14.2015

Hey there,

I have almost finished our wordpress blog page but encountered a problem and can’t be solved. Our blog page address is blog.us-kon.com.tr

On the upright side; there are social media icons. “Call me” button is hidden between linkedin and rss icon. What I want to do is to make it invisible or/and non-clicking on desktop view. In mobile view that “call me” icon is needed. Any code or help to make it invisible on only desktop view?

Thanks in advance…

to post a comment

PHP

12 Comments(s) _↴

@jedaisoulApr 14.2015 — #Hi and welcome.

How does the WP theme distinguish between desktop and mobile modes?

@Bruce_AthertonApr 15.2015 — #I think you can use plug ins and even directly contact you service provider like wordpress in your case.

@NogDogApr 15.2015 — #If it has an HTML "id" attribute, you could simply configure your CSS to make that element "display:none" within a @handheld media type group.

@ferforjeauthorApr 15.2015 — #Well actually what I need to know is ....... how to make the element(whose id is known) to be shown in mobile but not desktop version in php?

@rootApr 15.2015 — #Or you could make a transparent icon, name it after the icon you want replaced. Job done.

@NogDogApr 15.2015 — #Well actually what I need to know is ....... how to make the element(whose id is known) to be shown in mobile but not desktop version in php?[/QUOTE]

Set it to hidden in the main body of your CSS, then within the @handheld media group set display to block or inline, as applicable for the element type/usage.

@jedaisoulApr 15.2015 — #In my experience (which is not extensive) only smartphones respond to [b]@media handheld[/b], and possibly not all of them. Tablets tend to respond to [b]@media screen[/b], particularly the higher resolution ones. So it is true to say that all handheld devices are mobiles, but not that all mobiles are handheld devices!

So in practice I tend to use multiple cutoffs, mostly based on max-width, but with one based on max-device-width (e.g. [b]@media (max-device-width:479px)[/b]) on the assumption that there is no need to distinguish between devices with screens wider than that. I.e. What really matters is the screen or window width, not the device type.

That is why I asked, and repeat: how does the CMS/theme distinguish mobile devices from PCs? The answer to that question is vital to making the icon appear/disappear consistently.

@ferforjeauthorApr 15.2015 — #Well, a responsive template has been used. For this reason, same elements are used in both mobile and desktop view. So that there is no different elements, there is only single type element on it.

We can say that our aim is to make this visible and clickable on only the mobile view. For this, i think i need an example php script???

Have you guys had an opportunity to look through it? www.blog.us-kon.com.tr..........upper rightside between linkedin and rss icon.

@rootApr 15.2015 — #Please post code, the link is wrong, searching for blog kon upper... turns up strange results to say the least.

When posting code, use forum tags (see my signature)

@jedaisoulApr 15.2015 — #To make the icon appear and disappear as desired, it needs to link in to the mechanism by which the template is adjusting the display for different screen/window widths. E.g. Somewhere in the CSS will either be a media specific style sheet for smaller screen devices, and/or an @media command similar to the one I gave above. There is a style sheet "css/responsive.css" and the @media commands are in there. This is an extract (the file is too large to quote it all):

responsive.css

<i>
 </i>/* ================================================== Media Queries ================================================== */
 
 /* --------------------- Desktops and laptops -------------------------------- */
 @media screen and (min-width: 1400px) {
 .boxed #container, .boxed #header.sticky { max-width: 1220px; }
 }
 @media screen and (max-width: 1400px) {
 #nivo-slider.loading { height: 350px; }
 }
 @media screen and (min-width: 1200px) {
 }
 
 @media only screen and (max-width: 1100px) {
 /* Fix for iOS devices to disable parrallax scroll and fixed positioning */
 .segment { background-attachment: scroll !important; background-position: center center !important; }
 }
 
 /* -------------------------- Small screens -------------------------------------- */
 @media only screen and (max-width : 1024px) {
 .box-frame, .box-frame2 { max-width: 280px; margin: 0 auto; }
 .type-portfolio .image-info h3.post-title { font-size: 16px; line-height: 24px; }
 .image-grid .sixcol, .image-grid .fourcol, .image-grid .threecol { margin-bottom: 18px; }
 .pricing-table .threecol { width: 48%; margin-right: 2%; margin-bottom: 20px; }
 
 <i>    </i>#site-logo, #primary-menu { display: block; }
 <i>    </i>#site-logo, #header .button.get-app, #header .social-container { top: 10px; }
 <i>    </i>#header &gt; .inner &gt; .warp { min-height: 80px; }
 <i>    </i>#primary-menu { margin-right: 0; padding-top: 15px; }
 <i>    </i>#primary-menu &gt; ul.menu &gt; li &gt; a { font-size: 16px; line-height: 60px; }
 <i>    </i>#primary-menu &gt; ul.menu &gt; li:hover &gt; ul.sub-menu { top: 56px; }
 <i>    </i>#nivo-slider.loading { height: 310px; }
 
 <i>    </i>}
 
 /* -------------------------------------- Smaller than standard 960 (devices and browsers) -------------------------------------- */
 @media only screen and (max-width: 959px) {
 #title-area p { width: 100%; }
 /* --------------------- Disable non-responsive sliders for devices with smaller screens -------------------*/
 }
 
 /* --------------------------------------Tablet Portrait size to standard 960 (devices and browsers)-------------------------------------- */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
 .sidebar-right-nav, .sidebar-left-nav { }
 .flex-caption, .nivo-caption { left: 70px; bottom: 20%; }
 .flex-caption a, .nivo-caption a { font-size: 26px; line-height: 30px; }
 
 <i>    </i>}
 
 /* --------------------------------------All Mobile Sizes (devices and browser)-------------------------------------- */
 @media only screen and (max-width: 767px) {
 body { -webkit-text-size-adjust: none;
 /* do not adjust size of text on iPhone */
 }
 h1, h2, h3 { margin-bottom: 20px; }
 h1, #title-area h1 { font-size: 28px; }
 h2, #title-area h2 { font-size: 26px; }
 h3, #title-area h3 { font-size: 22px; }
 
 <i>    </i>#title-area h1, #title-area h2 { font-size: 32px; line-height: 38px; }
 <i>    </i>.heading2 .title { font-size: 28px; line-height: 36px; }
 
 <i>    </i>.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol,
 <i>    </i>.sixcol.zero-margin, .fourcol.zero-margin, .threecol.zero-margin { margin: 0 0 25px 0; width: 100%; }
 <i>    </i>.threecol.equal-margin, .fourcol.equal-margin, .sixcol.equal-margin { padding: 30px 0; }
 <i>    </i>.threecol.dual-margin, .fourcol.dual-margin, .sixcol.dual-margin { padding-right: 0; padding-left: 0; margin: 0; border: none; }
 
 <i>    </i>#header.sticky { display: none !important; }
 <i>    </i>#header &gt; .inner { text-align: center; }
 <i>    </i>#header &gt; .inner &gt; .wrap { min-height: 40px; }
 <i>    </i>/*No need to worry about sticky menu in mobile */
 <i>    </i>.sticky-wrapper { height: auto !important; }
 <i>    </i>#site-logo { position: relative; top: 0; }
 <i>    </i>.social-container { position: relative; display: inline-block; text-align: center; top: 0 !important; }
 <i>    </i>#header .button.get-app { position: relative; display: inline-block; text-align: center; top: 0; margin: 10px auto; display: none; }
 <i>    </i>#nivo-slider.loading { height: 230px; }
 
 <i>    </i>.sidebar-right-nav, .sidebar-left-nav { background: none; }
 <i>    </i>#content, .sidebar-left-nav, .sidebar-right-nav { float: none !important; }
 <i>    </i>.sidebar-left-nav, .sidebar-right-nav { padding: 20px 0 !important; }
 <i>    </i>#sidebar-after-singular .widget { float: none; margin: 0 0 25px 0; }

That should indicate how to make the icon appear/disappear, but there is the question of whether the CMS allows you to edit it?

@jedaisoulApr 15.2015 — #@. That

is my fault for editing the link. This: http://blog.us-kon.com.tr should work.

@ferforjeauthorApr 16.2015 — #It has been solved, thank you all...

Also in #PHP _↴

Looking for an experienced PHP developer in South Florida with sports knowledge centering ttf text in dynamic image with dynamic font size to make it fit image width Gallery question

Success!

Help @ferforje spread the word by sharing this article on Twitter...

Tweet This

Making icon invisible in WordPress help

12 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

Making icon invisible in WordPress help

12 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #PHP _↴