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;
}
Related
The problem could be simulated here:
https://demo-bi.abra.eu/app/show
There should be this:
But on iPhone, or iPad there is this, but only on first load:
On the second load all items are visible correctly, like in the first image.
Every item in list is affected by this CSS style:
#media (min-width: 26.25rem) {
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
max-width: none;
float: left;
width: 50%;
}}
I found out, that in case you delete the "#media" section, everything works fine and all items in list are visible:
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
max-width: none;
float: left;
width: 50%;
}
The interesting thing is that the style is applied with or without #media query. So it should have no impact on that, but it does.
It is happening on any iPhone, iPad in Safari or Chrome.
Thanks for any answer.
couldn't recreate in chrome 'toggle device' it seems suspicious that reloading fixes the problem, maybe it doesn't relate to CSS but to JS. I will suggest changing the float to flex or grid anyways.
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 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 am not a web designer & I do not understand the CSS code very well.
what to edit in the famous mx-fluity blogger template to produce (multi-level) menu on both PC browser and mobile browser with the same style.
thanks in advance.
If I understand correctly, you don't want the menu to switch to a "mobile menu" (drop-down). Or do you want the navigation to be a full-width dropdown all the time?
If you want the navigation to remain as it is on the desktop as long as possible you need to look at the media queries.
Somewhere you'll find:
#media only screen and (max-width: 767px)
Look for the selectors called: #navinti and #mobilenav
You need to prevent #navinti from being hidden, and the same time disable #mobilenav
They currently look somewhat like:
#navinti {
float: none;
...
}
#mobilenav {
display: block;
...
}
Set it to:
#navinti {
float: left;
...
...
}
#mobilenav {
display: none; /* You might have to add an !important to this */
...
}
At #navinti erase:
background-color
-moz-box-shadow
-webkit-box-shadow
box-shadow
If your navigation isn't wider than the one on the template, you should get away with this down to 500px (width), from there you can hassle your way to say 460px width padding & margin... Unless your navigation has only 2 or 3 points there's not much of a chance you will get it squeezed onto a mobile screen.
I have used this
.navbar-form .form-group {
padding-top: 30px;
display: inline;
}
to get the search box vertically centered on the bootstrap menu bar, but for some reason IE and Chrome does not recognize the padding-top:30px. Fire fox adjust to the padding quite fine.
How can I get this search box in IE and Chrome to pad properly.
Check this bootply: http://www.bootply.com/D27W6qcvVF
Your css should be like:
.navbar-form {
padding-top: 30px;
display: inline;
}