I have two web pages:
mobile.html with mobile.css and desktop.html with desktop.css.
How can I make a redirect to the mobile one (the default page is desktop.html) if screen size is less than 12″.
This is not recommended the best way is to use media queries to make your site responsive. By adding the class and detecting the browser width change.
<div class=" mobilehidden">
<p>This text is hidden in mobile</p>
</div>
Now in Css put this line
#media only screen and (max-width: 500px){
.mobilehidden{
display = none;
}
}
if you want to do this then you can use JavaScript for this. You can also use php ,css but JavaScript is easier. Simply use this inside script tag
if (screen.width <= 700) {
document.location = "samplepage.html";
}
If you are using bootstrap there is a class for this
.visible-xs-*
.visible-sm-*
The mentioned above sm is for tablets whereas xs is for mobile.
You can accomplish this with PHP, using a lightweight class such as Mobile Detect. Once downloaded and added to the server in the root of your website, you can then use this code to detect if the device is a mobile and set the location to the url of your mobile site:
<?php
/* Change path info depending on your file locations */
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if($detect->isMobile()) {
header('Location: http://mobile.example1.com/');
exit;
}
?>
Other devices can be detected and further examples can be found here
You dont have to change the page but just use bootstrap for making page responsive i hope you know bootstrap if you don't see learning tutorial in youtube.
Related
I need to delete one item in my mobile menu via Custom.css. I don't want to edit other files in WordPress.
This is screen of my mobile menu items. And I want delete just one position. It's easy to do that via Google Chrome editor, but what do I need to add in my custom.css to save this permanently?
Screen of my menu before originally:
Link to website: http://test.projekt-tenis.pl/wordpress/
All i want is to delete only : " Oferta " from the menu.
After editing it in google chrome my menu looks like :
As you can see " Ofera" is deleted.
I want just do this via Custom.css. I saw a few topic about it but still don't know how can i do that.
This should fix it. We don't need to delete the DOM node using JavaScript or something. Each and every menu item in WordPress can be uniquely identified using their Post ID. In your case, it is 988. We can use display: none; for that particular element and hide it using CSS. This is the sole reason for having #media queries.
Use this CSS in your custom.css.
#media screen and (max-width: 960px) {
#menu-item-988 {
display: none;
}
}
I am targeting the clients with a screen size of 960px or less, which can be loosely considered to be a mobile device. You can always refer to CSS Tricks' Media Queries for Standard Devices.
Preview:
"Deleting" an item from the DOM can be done in a variety of ways. I imagine what you're going for can be achieved with a simple display: none; property assigned to that item in your CSS file, this will remove the element visually but will not delete it from DOM.
My website is www.dreamzabroad.in,
I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?
One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:
http://getbootstrap.com/getting-started/
You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.
You want to look into media queries, which will allow you to change your CSS based on certain conditions.
If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.
Use Bootstrap media query or simply use custom media CSS properties.
for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.
<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />
Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.
#media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
#media screen and (max-width: 711px) {
body {
background-color: Green;
color: Red;
}
}
References:
https://www.geeksforgeeks.org/bootstrap-media-queries/
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first.
I'm building a site with 3 columns article. It's working fine on desktop but when you start resizing. It goes like this.
What I want is that 'First post from Salon87 Brooklyn' should be next to 'Second Post' like this.
And this is what I want it to look like on desktop
Here's the code. http://www.salon87.nyc/news/
The problem with the HTML is that, there is an element fix added to the blocks. You need to hide it for mobile devices. Try changing 991px to your requirement.
CSS
#media (max-width: 991px) {
.fix {
display: none;
}
}
I have two different div element (one for desktop and other for mobile) which have to be loaded based on the device accessing my website. What is the best way to do this? I do not want to check the user agent since it gets updated often.
Right now I'm using css media queries to find the device specs and hide / show the corresponding div. The problem is, I'm loading both the divs irrespective of the device. I only want to load the corresponding div.
Furthermore, re-sizing the desktop browser to the size of mobile should load the mobile div. What is the best way to do this?
Thanks.
If you can use JavaScript (and jQuery ), you can manage to load the content based on the width of the devise. The basic idea is something like this:
index.html
<body>
<div id="content">
<!-- content will be loaded here based on the width of the devise -->
</div>
</body>
phone.html
<div>
This file is for small devices
</div>
pc.html:
<div>
This file is for large devices
</div>
JavaScript in index.html:
function loadcontent(){
var BreakPoint = 480; // pixcel
if($(window).width() < BreakPoint){
file = "phone.html";
}else{
file = "pc.html";
}
$("#content").load(file);
}
loadcontent();
$(window).resize(function () {
....
loadcontent();
....
});
The above code is just the basic concept.
To handle the window.resize events smoothly, there are several functions to be implemented. If you would like to see the codes of that part, I will update my answer.
hope this helps.
I have a page set out similar to this:
My question is about mobile support and how should I go about doing the following:
When the user resizes the window to about the size of a smartphone screen, I want to remove the main content, which is everything below the header area/login, and keep only the header, the login form and the footer. So I have been using css media queries to do this. My problem is that my login form markup resides within the header area.
<div id = "header">
<div id= "logo"><img src =""/> </div>
+-------form markup here------+
|<div id= "login-form">..... </div>|
+ ----------------------------+
</div>
<div id= "main-content">
This is where I want to put the login form
</div>
So my question is, How should I do this?
should I just create another css file and link/apply that when the screen width-height is detected to be smartphone size ?
Should I create the markup block inside main-content, and set its css style display to none UNTIL the screen is resized to smartphone size, where a media query is set to change display attribute ?
What is the best way to accomplish this? I greatly appreciate any help and at least, some little explanation to justify that answer. Also links and other references are very welcome !
Cheers..
Use Media Queries to hide and show content based on device or device width/height.
Here's a good Media Queries Cheat-sheet:
http://stephen.io/mediaqueries/
I wouldn't position the form as 'absolute' and put it outside the header as another poster suggested. This is super sloppy and bad practice. What's the 'absolute' form going to be positioned too? The body? Aghh. You'd need a wrapper - and that's just more code. You can do it all via CSS. Just use Media Queries to change the CSS styles for the header, show/hide elements, and reposition.
OR
JQUERY (Not the best route, but for what you want you're a limited without a redesign). I kept it simple for easy explanation. Note, I haven't tested this:
$(window).resize(function(){
var maxwidth = $(window).width(); // get device window width
var form = $('#login-form'); // form
if(maxwidth <= 320) { // 320 px or whatever you want
form.clone().appendTo('#main-content'); // clone form and append to main content
form.eq(0).hide(); // hide first form, the one in the header
}
else {
form.eq(0).show(); // show initial form
form.eq(1).remove(); // remove cloned form, if set
}
});
I can see two ways you could go about accomplishing your goal:
Take your login-form out of the header div, put it in the main-content div and absolutely position it to make it appear inside the header when on a desktop screen, then use a media query to move it to below the header for viewing on mobile devices.
Use your idea of having two login-forms: one in the header, and one in the main-content area. Use media queries to change the display attribute so that the correct login-form is showing at the right time depending on the screen size. I'm not sure if duplicating the login-form is good practice, so I would try option 1 to start.
Let me know if this works out!