I have a set of social media icons in the footer of my website.
The icons are inserted there via a Text widget; the code for the icons is as follows -
<div class="icon-benz-footer" style="font-size: 16px; text-align: center;">[social-media items_align="center"]</div>
For some reason, the icons won't appear on a mobile device. How do I rectify this?
I've checked you website and the .site-footer-first-widget-area is hidden on mobile phones. The code for this is present in the main.css file.
If you want it to be always visible you can make the following changes to your main.css
/*=========================================================================
3. Footer styles
======================================================*/
.site-footer-first-widget-area
{
display: block;
margin-bottom: 10px;
}
PS: your inline css in the opening post has a small flaw. There is no such thing as float: center;
Hope this answer helps!
Related
I am using Elementor page builder. I mention this because it allows css to be placed in the widget itself.
I have two versions of a div table, one for PC and Tablet and another for Mobile only. They are co-existing on the same page but have display options set in each section.
Two days ago I gave the mobile version an extra class name of "scroll-table" and applied this css snippet to it;
table.scroll-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
The table scrolled horizontally quite nicely on Firefox mobile browser and well enough on Chrome mobile browser (client viewed on this browser). It was a very long day so I called it quits.
Yesterday I added some more css to place a button where the signup links were (final right hand column). I did this by adding the class name "button" to the links, "btn" seemed to be pre-existing because it immediately shrunk the text. Then I added this css snippet in both widgets (Mobile and PC).
.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: #F39C25;
color: #fff;
}
The result was that the buttons appeared, and correctly, however it stopped horizontal scrolling on the Firefox mobile browser, while the Chrome mobile browser scrolls the whole page horizontally. This behavior on Chrome mobile is acceptable to the client but I am not thrilled with it. The day before, when it was working on Firefox mobile it scrolled as a container complete with a scroll-bar underneath. Being tired (and a little under the weather) I assumed this is what the client was seeing as well.
Adding !important to the overflow-x: auto; has no effect so I removed it again.
I have no problem adding css to the style.css if that would help, and have a Child theme installed. However, in the Elementor FB group there has been much ado about "You don't need a child theme." and thought in this case the widgets would be a more appropriate place to place it.
Can anyone help?
I'm trying to make a bootstrap menu appearing on the iPad size.
I have used the usual navbar snippet from bootstrap with some modifications. It is all good on phones and laptops but when it comes to iPad the navbar simply get hidden
here is the link for the top :
http://sos-optic.com/headss.php
to view the problem you can use google chrome console --> choose phone view then select iPad.
This CSS rule in your style is hiding it, try to update to the following? I commented out the display: none;
After updating your style sheet, do hard reload (otherwise your browser will use the cached CSS style sheet)
/* Mob Menu */
#mobile-menu {
/* display: none; */
width: 100%;
text-align: left;
float: left;
}
Hey I'm trying to add icons to my top navigation bar.
I have a plugin for social media icons, so I am trying to add the plugin shortcode to the nav menu. I downloaded a plugin to allow me to add shortcode to a menu.
Here is the shortcode I want to add: [feather_follow show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
I tried adding size="16" to make the images smaller but it made them disappear completely. Please visit my site to see the results I am getting. Containers and sizing are all screwed up, I have no idea how to begin fixing this.
Can anyone take a quick look and suggest anything? I would REALLY appreciate it. I have already wasted hours and hours on this simple problem. My site is greenenvysupply.com
Try adding this
[feather_follow size="64" show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
You should use percentages for making your icons smaller without losing the ratio of the icons. So you can write something like this in your main CSS:
.top-bar ul>li a {
width: auto!important;
height: auto!important;
}
.top-bar ul>li a img {
position: relative;
width: 30%!important;
height: 50%!important;
}
I’m working on my footer and I have some contact info floating to the right and the text is aligned right.
Below that I wanted to put social media links. I wanted “Follow me at:” then icons for Facebook and Instagram. I gave these icons as well as others in my footer the class “icon”. In my css I targeted them and gave them color, pseudo classes, size, etc. For some unknown reason, the first icon isn’t being targeted. I even copied and pasted the code for the second over the first one and it’s still no targeted. Is there a rule I’m missing? I haven’t messed with spans much, so I may be screwing that up. I wanted it inline, unlike the other contact where the small icons sit in their own block above the text. That was a happy mistake. I like it.
Anyway, here's the code:
HTML:
<div class="soc-media">
<span>Follow EmJ Pilates on:</span>
<span class='icon'></i></span>
<span class='icon'></i></span>
</div>
CSS:
.icon{
color: goldenrod;
font-size: 200%;
}
.icon a:link{
color: goldenrod;
}
.icon a:hover{
color: #bbbbbb;
}
And here’s a link to the screen shot:
https://www.dropbox.com/s/2d2r0uzyh6yyjtd/Screenshot%202015-07-24%2011.39.20.png?dl=0
On the following web page which is under construction, you will see a white box next to the company name at the top left here
This is a twitter-bootstrap based site and the white box "glyph icon" from FontAwesome. I cannot seem to reduce the size of the white box (maybe 25% or so would be desirable) without having the icon fall out of alignment with the company name. Could you please "view source" on the site and see if you are able to determine the right code change?
Here is a solution for your problem. Add line-height: 28px; and change padding-top to 8px to the .navbar .brand class in custom.css file. And then add the following css
.navbar .brand .icon-sign-blank
{
font-size: 75%;
padding-bottom: 4px;
display: inline-table;
vertical-align: bottom;
}
in custom.css file. It will align the fontawesome icon to the baseline of the brand name. Hope it helps to fix the issue that you are facing.