I am currently creating a Bootstrap 3 website for mobile and desktop, taking the mobile first approach.
I have been following this webpage Creating a Mobile-First Responsive Web Design
It mentions using a style.css for mobile view and enhanced.css stylesheet for a desktop view.
I know this is possibly quite basic but I am slightly confused as I am currently using one stylesheet which holds the mobile styles as default and I am using media queries for the tablet and desktop views.
I want to know what styles should be added into the enhanced.css stylesheet for desktop view?
It really doesn't matter whether or not you separate it into multiple stylesheets or one stylesheet. It really is a matter of personal preference.
I personally use one style sheet for things that I want to be universal throughout the entire website (such as a universal font, or a universal font color). I call that sheet pageFormat.css.
Then I create a separate CSS file for each page I create if I plan on adding and adjusting things such as button sizes specific for that page.
Just be sure that whether you are including one stylesheet, or multiple, you are including the link reference so your HTML browser knows where to locate the CSS file that has all the data.
Related
I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).
Each one should only be displaying to their respective sizes because of the use of the .css:
layout.min.css
#usp-banner2{display:none}html{padding-bottom:0!important}...
custom.css
#usp-banner2{display:none}
#media (max-width:767px){
#usp-banner{display:none!important}
#usp-banner2{display:inline}
}
Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. Source: https://www.ivyandfig.com
I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?
Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?
Most of the stylesheets and scripts on your site are being loaded via JavaScript. That JavaScript is triggered much later as compared to when the initial content is visible on your site.
As you have guessed, this is happening because CSS is loaded much later so for the time being both images are visible.
As that part is a Shopify section, a quick fix is to include the related CSS rules inside section. More of that is available on Shopify Documentation for Sections.
Another fix may be is to create a separate stylesheet with only rules like that CSS reset, hide and show content etc and include it via link tag in header.
You can also use some logic based on inline styles by hiding both initially and then display later via JavaScript.
I wrote a media CSS for mobile, and without the main stylesheet (desktop), it looks how I want on my device, but when I include the main stylesheet, it looks wonky on my device, almost as if it's taking properties from both sheets. Is it because I don't have all of the same properties for all of the selectors in both stylesheets?
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I currently have a web application that uses Themes to skin it either as SkinA or SkinB. Until now, this has been a web application that has not focused on mobile devices in any way, so the site.css file (within both Theme folders) has targeted normal desktop devices.
However, without changing any of the web form aspx files throughout the project, I now need to create a mobile version of this site.css file (for both Themes) that will alter the layout so as it looks a little bit cleaner when viewed on mobile devices.
I found the following snippets in an article that sounds fairly logical, however, due to Themes folders being used (and from the little I understand about themes, I think all CSS files get included automatically), I'm not sure how I would accomplish this.
Extract from: http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets
First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet core.css:
#import url("screen.css");
#import url("antiscreen.css") handheld;
#import url("antiscreen.css") only screen and (max-device-width:480px);
Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page:
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
Or perhaps there is a better way of accomplishing this, whilst retaining the use of Themes?
I have come across this in a project I'm doing at the moment.
One way you can do this is to use Modernizr.
It's a javascript library you can get at modernizr.com.
It will test the destination browser, and if it supports touch events, it will add a style of "touch" to the element of your webpage. Generally, if Modernizr does this, it's either a tablet or a phone. Then you prefix each style your phone/tablet css with ".touch".
Couple this with media queries, and you should be able to handle most (probably not all) devices out there.
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.