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?
Related
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!
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;
}
I have a float right div within a template that loads correctly on initial page load or hard refresh.
However, on state change (using ui-router) then returning (ie swapping templates out), div gets bumped down, by what looks like a div to its left with no float.
Have I applied CSS incorrectly somehow?
Screen shots attached of both scenarios. First image is initial load, second is the page (NG template) returned after leaving via link on page. Link is a template too. The only reason I mention NG is that I've tried to recreate in Plunker with conventional href links, and failed to get the error.
HTML
<div class="locate-change">
<input type="text" color="red" placeholder="ENTER LOCATION" class="input1" />
<a ng-click="locateme()" href="" class="locate2">LOCATE</a>
</div>
CSS
.locate-change {
float:right;
height: 35px;
padding-left: 10px;
width: 300px;
}
.input1 {
display:inline-block;
border: 1px solid red;
background: #000000;
text-transform: uppercase;
font-family:'DINLightRegular', Helvetica, Arial, sans-serif;
font-size: 1em;
margin: 0;
padding: 4px;
outline: none;
width:160px;
}
.locate2 {
float: right;
padding-left:35px;
background: url(../../images/locate.png);
height: 30px;
background-size: cover;
background-size: 30px;
background-repeat:no-repeat;
width:65px;
}
I can recreate the angularjs plunker if necessary.
EDIT a couple of notes:
- this is only happening in Chrome, not in FF or Safari
- the 'Change City' input div uses Angular UI Bootstrap typeahead which seems to add a .dropdown-menu class div - but it has zero dimensions (see screenshot below)
- the empty typeahead dropdown results div code appears and is identical in both correct and incorrect states
I think this is a bug in how Chrome treats the angular-ui bootstrap typeahead directive (based on the fact that we're not seeing this error in either FF or Safari)
The order things are happening seems to be:
- on initial load, the DOM only loads existing html/CSS elements
- once the DOM is loaded, the ng directive then adds the empty typeahead dropdown div, which sits 'below' the locate2 div on the screen despite being written in the DOM between existing divs
ie as the browser reads through the DOM it places:
- input div 1st
- locate2 div 2nd
- invisible dropdown div added last via directive
On returning to the page via ui-router:
- the DOM now includes the additional dropdown element between input and locate2 divs
- each html element is treated in the order it's read in the DOM
- this means that the 'invisible' dropdown div now pushes the locate div out of the way...(in Chrome)
ie as the browser reads through the DOM on returning to the template it places:
- input div 1st
- invisible dropdown div 2nd
- locate2 div 3rd
For whatever reason, Chrome is treating the dropdown not as a hidden div, but as a collapsed visible(?) div and pushing the locate2 div out of place.
On moving the locate2 div to before the change-city div, the injected dropdown code no longer interferes with locate2 div.
In the 'fix', as the browser reads through the DOM it places:
- locate2 div 1st
- input div 2nd
- invisible dropdown div 3rd
In my GWT application I have a button panel, implemented as HorizontalPanel containing Button widgets wrapped within <g:cell> elements.
<g:HorizontalPanel styleName="{style.horizontalPanel}">
<g:cell>
<g:Button ui:field="selectButton" title="{constants.buttonLabel}"
text="{constants.actionLabelSelect}" />
</g:cell>
...
</g:HorizontalPanel>
The buttons have the following css:
.gwt-Button {
font-size: 13px;
color: #337BB1;
margin: 0px 10px;
padding: 5px 7px;
border: 1px solid #E3E3E3;
}
Button labels often have two words. Compared to all non-IE browsers, the button panel does not fit into the layout. Each button looks way too wide, a certain button is only shown partly. Moreover, even if I resize the view (Ctrl + "-"), this still is the case, as the whole panel containing the buttons is resized. The behavior of all FF and Chrome is: button labels are line-breaked if the panel does not fit into the browser window, and the buttons are much smaller by default, so that it cleary fits in standard browser size.
Why is IE behaving differently?
Another problem with debugging is that in GWT's superDevMode and devMode, the problem does not occur in IE, too.
How is this possible?
Browser version: IE8,
GWT version 2.5.1
Try with CSS min-width Property
.gwt-Button {
...
min-width: 135px;
}
you can try with CSS overflow Property also
overflow: visible;
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}