I am redesigning my site for mobile first. I have read a few stackoverflow questions relating to this but none seemed to be a complete answer. I searched the web and came across http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
In the CODE FOR MOBILE-FIRST section, it says the best way to conditionally load images for different screen sizes. What I'm looking for is that, but for html elements.
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
I do not want this section of html to be loaded when loaded from a mobile device, however I DO want it when called from desktop computer.
Using the solution from smashingmagazine (conditionally loaded using css) is it possible doing it this way or does it just apply to images?
Thanks for any help =)
one way is to redirect and load different html based on the device.
check this Link.
or use jquery plugin Link.
I suggest using media queries to display respective content but using this method you load the whole HTML but display based on the device.
information about media queries -LINK
like this
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
css
#media (min-device-width: 640px) {
.social_buttons{
display:none;
}
}
You can do it with javascript. Just do what you want in case of mobile or desktop.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// mobile
} else {
// desktop
}
Related
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
I have designed a website that uses a CSS hamburger menu to activate a slidebar with a links to different webpages on the site.
I also have written an iPhone/andriod apps that need to have an hamburger menu that open a slider work that run swift and android code.
I want to add to the iphone/android hamburger slidebar links to the website (which has it own hamburger menu)
How can I test on the website if it a mobile device or a PC, so I can turn off if "Website" hamburger if its a mobile, since I already have and need the hamburger menu on the mobile.
I have php on the website so I can remove the hamburger menu on the website if its a mobile.
This is the main page
<html>
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button>
Link 1
Link 2
Link 3
</div>
<div zclass="w3-main" id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
Thanks
so there are a few ways of doing this, but a really simple one is something like this:
var width = $(window).width(); //jquery
var width = window.innerWidth; //javascript
if(width > 1000){do large screen width display)
else{handle small screen}
of course 1000 is just an arbitrary number. it gets tricky because when you consider tables, there really are screens of all sizes so its up to you to determine what belongs where
How can I test on the website if it a mobile device or a PC, so I can
turn off if "Website" hamburger if its a mobile,
If I understood you correctly, you could use CSS #media -rules, to setup CSS rules that only apply to smaller devices. Below is a simple code-snippet example of a CSS media-query.
#media (min-width: 700px), handheld
{
.w3-sidebar
{
display: none;
}
}
Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
Having used Twitter Bootstrap for some time and always wanting more in the way of admin UI features, I've decided to give Semantic UI a try. The Semantic docs are a lot less concise than Bootstrap's, but each individual tool is fairly easy to implement. However, I've begun creating a basic UI to try out Semantic UI and I'm having trouble figuring out some of the basic stuff, like what to use as a suitable replacement for Bootstrap's .container, etc.
Semantic UI author here. I will be adding a generic container class in next minor release.
semantic-ui works differently while expecting about the grid system and the class ui page grid make the similar approach like bootstrap. You can see this example template too http://ehkoo.github.io/semantic-ui-examples/jumbotron where in the template you can change the classes to test. When class ui grid is applied, it takes the full-width and with ui page grid it works for 992px width with padding-right and padding-left. you can find the media queries for screen min-width 992px :
#media only screen and (min-width: 992px) {
.ui.page.grid {
padding: 0 8%;
}
}
Besides, there is an issue you can follow. Link: https://github.com/Semantic-Org/Semantic-UI/issues/175
And You can follow the documentation page: http://semantic-ui.com/collections/grid.html
I don't know if it's helpful for you or not.
Yes, You can do the following:
<div class='ui centered grid'>
<div class='fifteen wide column'>
<!-- Below you can write your code -->
<div class='ui menu'>
<a class='active item'>Editorials</a>
<a class='item'>Reviews</a>
<a class='item'>Upcoming Events</a>
</div>
<!-- your code ends here -->
</div>
</div>
My website 5focusmanagement.com is not displaying completely on mobile. Only footer is displaying. May be error with HTML tags or CSS styling. Here I am attaching code. Please suggest me how can I display complete website when we open on mobile browsers. Thank you.
Please download the code here..
<div class="container hidden-phone">
You have a hidden-phone class that hides the content on mobile devices.
.hidden-phone {
display: none !important;
}
Remove this rule and the content will be displayed.