I designed a website and when i began using elementor. I foundout there is a problem with responsive mode. when i set an adjustments for desktop mode, the same would be applied on two other modes. For example when i set my text Font Size on 15px on desktop, the same is applied on tablet & mobile. And when i change font size to 10px on mobile or tablet, that would be fixed on 10px on desktop mode. what is the solution to this except using css?
Related
I was testing a ComboBox in my device and I noticed gray stripes that where not there before. The stripes don't show on the simulator.
I changed the UIID for the ComboBox from white to yellow to check if it was the background color, but it is still there.
What am I missing?
It seems like you are running on the nexus skin on the simulator which uses an older native theme as a basis, this is probably the cause of the difference between your device and the Simulator, change your simulator to HTCOne or xoom and you will most likely see these stripes on the simulator as well.
Try to modify the "ComboBoxItem" uiid to be transparent and with an empty border
While investigating the Google SEO issue with respect to not having a mobile web site. I've learned recently that lack of proper mobile site would reduce the search ratings, and a different content for a mobile and a desktop sites might hurt your SEO as well.
Currently we have a MVC site that wasn't designed to be responsive. I don’t want to create something that will require more maintenance. (IE new mobile site or creating new views for mobile versions..).
I've learned that converting the site to be responsive is technically possible but not recommended for the following two reasons:
The current site might not work well on small screens.(CSS issues, modifying the CSS might be a pain and risky).
We have too much stuff on the current site.
While googling, I found that this would be the best way to go.
Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option will require new CSS and new _Layout page for mobile devices.
and then modify the _ViewStart to be
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
I would like to proceed with above approach, but If any one has any experience in this area, I would like to know the best practices, recommended approaches, and technical possibilities to achieve this.
There are typically three methods for handling Responsive Design :
Using A Responsive Design Framework
Using CSS Media Queries
Using Percentages
The ease of using each of these will ultimately be based on how complex your existing Project is and how much you are willing to do and change to make it responsive.
Consider a Responsive Design Framework (basically revising and updating all of the markup of your existing project)
This will allow your site or application to run on basically any device (and look nice doing so) regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.
It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap.
These could fairly easily be integrated into a Web Forms, MVC or Web Pages and would basically be all that you would need to use :
Great MSDN Article on Responsive Design
Tutorial on Integrating Twitter Boostrap into ASP.NET Web Forms
Beautify your ASP.NET Application with Twitter Bootstrap
The primary issue with using a framework here is that you already have your site designed and up and running. These frameworks work incredibly well when you use them from the beginning of the development of a project, however they will require a great deal more work when attempting to migrate an existing project to use them.
These frameworks have very specific classes and styles that actually do a ton of different things regarding responsive design and you'll have to use these new classes to replace basically all of your existing ones. It won't be the easiest migration, but it is certainly isn't impossible by any means and would be my recommendation.
Using CSS Media Queries (a neccessity if you want to handle creating this responsiveness without a framework, but more work on your part)
You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.
These will take a quite a bit more work than using a framework as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually resize some of your elements manually. You'll have to basically create a mini-stylesheet or media query for each of the resolutions that you want to target and manually enter the values that you want to use for that specific resolution.
I've done this more "hands-on" form of Responsive Design previously, but it is much easier to let something tried and proven like one of the frameworks handle it for you. Check out the very simple example below that will demonstrate how CSS Media Queries work :
<style type='text/css'>
/* Only affects 1600px width */
#media only screen and (max-width: 1600px){ body { background: green; }}
/* Only affects 1200px width */
#media only screen and (max-width: 1200px){ body { background: blue; }}
/* Only affects 900px width */
#media only screen and (max-width: 900px){ body { background: yellow; }}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ body { background: purple; }}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ body { background: orange; }}
</style>
and as you resize your browser / window, the styles will be applied accordingly.
Example (Editable Example)
Using Percentages (another option to provide a "responsive" feel, but it will require CSS Media Queries as well to be truly "responsive")
You could also consider migrating everything to use percentage-based sizing instead of explicit pixel sizes, but this is will be even more work than implementing the above media queries.
This will basically require you to scale everything on your site using percentages and defining minimum and maximum heights and widths for items. You'll likely have to use this in combination with media queries to get a truly effective solution.
ASP.NET MVC applications by default is responsive using Bootstrap.
http://weblogs.asp.net/jongalloway/two-free-video-courses-intro-to-asp-net-mvc-and-responsive-ui-with-bootstrap
I have to make a widget responsive. The url is
http://dev.pt-staging.com/discovery/careerpathwidget/index.html
The problem is it has lot of images & a background image too. I cropped background image for Ipod 320 x 480 (portrait ) it looked fine but when I see it in landscape mode it looked as it`s cut. I am amaze that there are many devices and many orientation how can I set my background image to appear on all in a same look and feel.
Q2 I want to make a design which looks good on all mobile phone so that if user see it in portrait the design looked shrink and in landscape it looked expanded, I dont want to create design for each & every resolution. So which resolution I should take to cover most of the smart mobile phones. I think on tablet my widget can appear easily as its 767 in width .
Please guide me , The site is currently responsive till i tried
This may do it. It worked for me.
body {
margin:0;
padding:0;
background:#d6d3c0;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }
I have went all over the web to find a solution for this one ...
i want to create a fixed bottom menu for my web application,
As i learned the support is not cross platform and each device and browser presents a different obstacle,
I have placed an element with
position:fixed;
bottom:0;
left:0;
problem : it is very buggy on some browsers (pops to place after the scroll ends , stays on the center of the screen, etc ' ...)
is there a good solution for this issue , or should i give it a rest :-) ?
thanks
There is no cross-platform solution for this, mainly because many devices still do not support touch events, that's why iScroll fails on WindwsPhone for instance. I predict native position: fixed; won't be implemented for at least one year (even iOS did it recently, other mobile browsers are way behind; we can expect WP8 with IE10 will support it and some other browsers, but that is not enough). I suggest you keep your toolbar at bottom and keep you page height small enough so people do not have to scroll down a lot - your app will look same on all mobile platforms.