I am using foundation's latest version (5.4.5). I have created a web page that shows a scroll-bar at the bottom. I have added all three types of column classes (large, medium and small), but I'm facing a problem when visiting the site using a smaller device. Help me and Any idea?
Image of my problem:
Related
I'm hoping someone can help direct me with troubleshooting for my portfolio page. I'm currently having issues with a few things and I'm not sure why or how to deal with them. Whenever I try to view them in tablet/mobile views on the deployed link the layout is completely different than when I run a live server with npm start.
The first issue about section in mobile and tablet views displays each paragraph in columns and the black background doesn't cover all of the text or the image.
The second issue is the contact page doesn't display the links on mobile even though the text color is set to black and the contact header doesn't show up on the page.
It was made in React. Below will be the deployed link and link to the github.
https://refactored-potato.netlify.app/
https://github.com/GSometimes/refactored-potato
I would really appreciate any help or guidance on sorting this out.
Thank you.
first piece of advice is that you have used TOO MUCH CSS, please use only what you really need. You don't need every css property to use on every element.
Your text/paragraphs are showing in column as their parent's display style is set first as inline and then flex. Either don't use it or write display: block
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 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'm building a responsive website at the moment and the main site navigation contains 10 links. I've seen a few sites that compress their navigation into a simple drop down select menu when the screen size gets below 480px, but I can't find any tutorials out there that explain how to do this - apart from the CSS Tricks one here:
http://www.css-tricks.com/convert-menu-to-dropdown/
I've tried this tutorial but not had any success with it as I implemented the code and yes I get a lovely menu on the iPhone, but the links don't work and clicking on it makes the page zoom in which is not desirable as this doesn't happen when I don't have the menu in place.
I'm looking for something simple like used on these websites:
http://www.hanselman.com/blog/
http://www.lancs.ac.uk/
anyone?
I managed to find this snippet of code on http://www.w3schools.com here:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu
Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.