It ispossible to make the size of input be different in the mobile browser of a site than in a the usual (desktop) browser?
Here's the page http://smartplanka.com/kak-postavit-planku/, where the sizes of the input fields are identical both on the mobile and the desktop browsers. On the mobile browser the input fields exceed the form's right boundary.
I'm actually behind from the evolution of CSS and HTML. But I think there must be something for this.
If it can help: the site is on wordpress and the form is the contactforms7 plugin.
Thank you.
Change the width of the input fields to 100%:
width: 100%;
That should do it.
Related
Developed a web application using MeteorJS and deployed it on the MeteorJS cloud. It works great when using a computer however, everything looks very big when attempting to access it through mobile devices.
I don't have much experience with making web applications compatible on mobile devices but I'm just a little lost on what exactly I will need to do. Please advise.
Git: https://github.com/jalapagos/SimpleCalorieCounter
After seeing your app live, it looks like you haven't used any Bootstrap classes for your layout and some of the page elements.
I recommend that you use the bootstrap grid system to make you app responsive. A very handy tool for checking how things look in different devices is the Google Chrome Dev tools device mode. Here is what your app looks like in an iPad Mini device emulator.
EDIT: Added step by step instructions to get started with bootstrap
Here is what you need to do:
Adapt the basic bootstrap template for you app. Be sure to include the three <meta> tags right after the opening of the <head> tag. See #jeremeyK's answer below.
Note: the inclusion of bootstrap relates CSS and JS files, or even your custom caloriecounter.css file in this main template is NOT necessary, since Meteor would do that for you. You have the package twbs:bootstrap which will include the bootstrap related files for you.
See how the bootstrap grid system works. Basically you might want to consider a simple layout like as follows:
The text in red are the bootstrap class that you need to add to get the layout. You can see that the top navigation bar has a class navbar, while the smaller section/sidebar has col-xs-12 and col-md-3 classes, and larger section has col-xs-12 and col-md-9 classes. The col-xs-* applies for very small screen devices while the col-md-* applies for medium screen sizes.
What these classes mean here is, for the small section if the screen is very small (xs) then the area should cover the entire width of the window. If the screen is medium sized, then let it just occupy 1/4th of the window to make some space for the table section.
Once you have your basic layout ready, go to each component of your app like the navbar, buttons, modal, etc. and fix the HTML markups as per the sample code given for each component.
You can do these things very easily, you only need to follow the guides in the documentation. Also read explanation by #adamwolf below.
Have you added a viewport meta tag?
<meta name="viewport" content="initial-scale=1">
Sorry, cant comment yet. To add to tsega. bootstrap is very easy, just add the class and bootstrap does it for you.
http://getbootstrap.com/css/#grid
The grid system is based on 12 columns, by adding the class, for each row you should have the column add up to 12. You can chain these together, for example class="col-xs-12 col-md-6 col-lg-3"
this is saying, on a small screen the element width should be 100%, on a medium screen the element should be 50% and on a large screen the element should be 25%.
Can someone please help?
I have created responsive email with desktop and mobile versions of code. It works fine in every mail client except in Outlook Web app that displays both versions.
I had the same problem with Outlook 2010, but I fixed it by wrapping mobile content in contidional mso comment:
<!--[if !mso]><!-->
<!--<![endif]-->
Woo!
Anyway, I'm sure your email is set up with some display:none / overflow:hidden css on the div that wraps around your tables for the mobile version, but outlook.com doesn't always play nice.
I think outlook.com's finicky preprocessor is to blame.
What I've found to rectify this is to add a .mobileonly{display:none;} to your style tag, then add class="mobileonly" to any problem elements that keep popping up on tests. Most often you just need to do the higher up container tables.
If that doesn't work throw your html into a jsfiddle and I'll look further into it.
I had the exact same nightmare and tried everything in the book. Eventually I found a solution.
Set the containing column height to 0 - the desktop and mobile image each need their own class. The mobile image should have inline width & height also set to 0. Then in your desktop query... display:none, width and height set to 0 for mobile image.
Then in your responsive query you can force the height and width of the resp image and use display block. Try this it worked for me...even in Outlook 2003!
Is there any specific html tag or meta tag that tells a web page is designed for mobile devices? I have created a mobile sitemap linking the mobile web pages, but I am afraid of search engines don't identify these webpages as mobile versions.
I Recommend using Media Queries in your CSS and focusing on developing your mobile website first if you're going to use this technique.
Basic Example
#media only screen and (min-width: 480px){
//insert styles SPEFIC to resolutions greater than 480px wide
}
Regarding the comment:
//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
#media only screen and (min-width: 480px){
display: inline; //or block or whatever you want
}
there may very well be a different or better way to implement this, but the point is...
If you are trying to control the look/feel of your website, do your best to keep it in the stylesheets
pro tip: You will want to use em / % based widths to ensure your site responds to your users browsers properly
Check out a working example with HTML5 Boiler plate here.
And Media query browser support list here
Additionally, if you are concerned about tracking your user base, Google Analytics can do that for you. You can break down your traffic however you'd like.
No, there is not. You can use JavaScript to detect mobile browsers, and direct users to special mobile versions of your webpages, but there is nothing that says for a specific page this is for a mobile browser.
If you are concerned that you will be presenting duplicate content to Google, block the spidering of your mobile site via a robots.txt file, then ensure that mobile users are always redirected to the correct mobile site.
If you're concerned about styles and things then see How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?
Else, if you don't want search engines linking to m.domain.com instead of domain.com (or whatever) then I'd think about doing some PHP header detection to redirect to the main site.
To ensure they're not crawled at all so will never show in search results, add
<meta name="robots" content="noindex" />
Is there a way to use responsive design principles with Google Sites. Has anyone tried that. Could you direct me to a sample site. I looked at this google help topic but then that is supposedly about exclusively mobile sites.
My main focus is a normal website which is optimized for web rather than primarily a mobile site.
Alternatively would Blogger be a better option in this case as that allows to change CSS.
I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.
The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.
Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.
To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.
There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.
As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.
Mobile yes, responsive no.
I was messing with Google Sites today and you can make a site mobile friendly (I had to come here to get started!). I just used the "Blank Template" to mess around with.
You do need to activate (like others that have mentioned):
Options (gear icon) > Manage site > (scroll down to Mobile) Check.. Automatically adjust for mobile phones. Yeah, let's bury that option way down at the bottom!
Considering the whole mobile "push" Google implemented in the spring of 2015 this should be ON by default for any newly created Google Site.
Just selecting that option makes an OK (basic) mobile site. Not a responsive site. So on my iPhone it does scale photos correctly to fit the device and switches the main horizontal menu to the "hamburger" icon/menu. But collapsing the desktop browser window does not produce responsive results.
https://sites.google.com/site/rwstws51/
As a test, I uploaded a way too large photo (2.5mb) to see what would happen. Running the site through Google PageSpeed Insights it did not display any "optimize photos" warning, so seems to serves up an optimized photo for phones and desktops.
I guess the basic theme is actually called "Ski." I tried out the "Legal Pad" theme and it was totally borked on mobile. I think due to the header and content area background images.
To me Google Sites is ideal if you are already heavy into Google's other products... drive, docs, Google+, webmastertools, analytics, etc... As it has links to add those types of items when editing. Or need a quick site for collaborating as you can easily set the site access like YouTube,Drive items.
Also, you are very limited as to what html you can added. Trying to add a script tag gets stripped out when attempting to save. So again depending on the use there are definitely other options out there.
The answer applying to old "Classic" google sites is NO.
If you create your own custom HTML forms with apps script, you can add the #media viewports etc to the css for those pages/forms,so that helps...
but the google site frame around overrides custom css attempting
responsive design at the page level.
now a days its possible to make a responsive Google Site. since Google has enhanced this feature "Automatically adjust site to mobile phones" option in the Manage Site option button.
to find the option- go to> Manage Site> General> , in the general settings page's lower portion you can see a radio button named "Automatically adjust site to mobile phones". Just tick the radio button & u have enhanced the feature.
Refer an example site made with responsive Google site www.jyotiprokashmusic.com
I want to have jQuery Mobile only if user is on a mobile or a tablet.
I was thinking to use Simple-RESS. This script allow me to access device screen.
The problem is that tablet screen resolutions are approaching desktop resolutions.
How can I correctly target mobile and tablet ? only with user agent ?
I think user agent is the best bet. You can however use viewport metadata tags and media queries in your header to adapt your site to different screen sizes using different stylesheets.