working on it ...

Filters

Explore Public Snippets

Sort by

Found 1,927 snippets matching: responsive

    public by JonahM  298456  2  6  4

    Responsive Type

    No Javascript required for responsive text! Pure CSS3
    /* Code Reference & Examples: http://mole.tk/1ymmXAv */
    
    
    /* 
    
    What Does vw and vm mean? 
        1vw = 1% of viewport width 
        1vh = 1% of viewport height 
        1vmin = 1vw or 1vh, whichever is smaller 
        1vmax = 1vw or 1vh, whichever is larger
    */
    
    body {
    	background-color:   #ff5442;
      font-family:        ‘Lato’, Arial, sans-serif; 
      margin:             2vw;
      
    }
    
    h1 {
    	color:              #fff;
    	font-size:          6vw;
    	font-weight:        900;
    	text-transform:     uppercase;
      line-height:        .3vw;
    	}
    
    h2 {
      color:              #fff;
      font-size:          4vw;
    }
    
    p {
      color:              #fff;
      font-size:          1em;
    }

    public by JonahM  275571  4  7  4

    Fluid CSS Rows

    I've realised in my coding experience that I need to To allow for space in the div or row tags when using text. Because everything is responsive on a web page, it's a good idea to use these classes. They work really well. Example: http://j.mp/1oilINn
    
    
    .strip-md{
    	padding-top:80px;
    	padding-bottom:80px;
    	position:relative;
    	overflow:hidden;
    }
    
    .strip-sm{
    	padding-top:30px;
    	padding-bottom:30px;
    }
    
    

    public by lbottaro  4397  10  8  3

    CSS media query for responsive web site

    Using @media you can specify which style to be applied to the page, depending on certain conditions. In this example I check the actual screen resolution, applying different styles when screen width is below a max value. This comes in hand for responsive web site (mobile or desktop applications)
    <style>
    .left{ 	
    	width: 50%; 
    	float: left
    }
    .right{ 
    	width: 50%; 
    	float: left 
    }
    
    @media (max-width: 320px){
        .left{ 
    		width: 100%; 
    		color: red; 
    	}
    	.right{ 
    		width: 100%; 
    		color: yellow; 
    		border: 2px solid green;
    		border-radius: 5px;
    	}
    }
    </style>
    <div class="left">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn red.</p>
    </div>
    <div class="right">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn yellow with a rounded border.</p>
    </div>

    public by JonahM  4828  11  6  2

    Full width header Image

    A great method for designing a full width responsive header image. Using Twitter Bootstrap also. Site: http://j.mp/1oilINn
    <div class="container-fluid" id="fit" style="background: url(header.png) no-repeat center center fixed;
    			-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
    			background-size: cover;">
    		
    		<h1 class="container header strip-md" style="text-align:center; color:white;">
    				Header Title
    		</h1>
    		
    </div>

    public by JonahM  3368  3  7  4

    Multicolumn row with responsive images

    Here I've got 3 images, header text and paragraph text which all fit together, central and fully responsive. Because I'm using dimensions in percentages, they're responsive for any screen size. Using Bootstrap Site: http://j.mp/1oilINn
    <div class="col-sm-4">
    					<div class="text-center spacing always bottom little">
    						<img src="home.png" style="width:50%; height:50%">
    					</div>
    			<h3>The Temple of God</h3>
    			<p>...to this man will I look, even to Him that is poor and of a contrite spirit, and who trembles at my word</p>
    </div>

    public by JonahM  3132  1  7  6

    Fluid Responsive Rows

    Site: http://j.mp/1oilINn
    <section class="strip-sm row-fluid" style="background-color: #262626;" >
    	<div class="container">
    		<h4 style="color:white">This is copyrighted by Jonah McLachlan</h4>
    	</div>
    </section>
    
    
                

    public by musictomy  1645  1  4  0

    Responsive with iframe

    css
    /* Responsive iFrame */
     
    .responsive-iframe-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
     
    .responsive-iframe-container iframe,  
    .vresponsive-iframe-container object, 
    .vresponsive-iframe-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /*And then wrap your Google Map or Google Calendar iframe in a div like this:*/
    /*<div class="responsive-iframe-container">
        <... iframe code >
    </div>*/           

    public by stevereich  1335  0  3  0

    Responsive Text CSS with Coldfusion

    Responsive Text CSS with Coldfusion: rt.cfm
    <cfscript>
        // serve content as mime type css
        getPageContext().getResponse().setcontenttype('text/css;charset=utf-8');
        // supress whitespace with cfoutputonly
        setting enablecfoutputonly="true";
        // example of url varialbe call:  /rt.cfm?height=1.25&weight=bold
        // structure of default values, if not received in url
        variables.baseSize = {
            lineHeight = (structkeyexists(url,'size')) ? url.height : 1.5,
            fontWeight = (structkeyexists(url,'size')) ? url.weight : 'normal'
        };
        private string function rt(required numeric variableMultiplier,required numeric maxMultiplier){
            var reponsiveText = '';
            savecontent variable = 'reponsiveText' {
                writeoutput("font-size: #numberformat(arguments.variableMultiplier/arguments.maxMultiplier,'9.99')#rem;");
                writeoutput(chr(10)&chr(9));
                writeoutput("line-height: #numberformat((variables.baseSize.lineHeight*arguments.variableMultiplier)/arguments.maxMultiplier,'9.99')#rem;");
            }
            return reponsiveText;
        }
    </cfscript>
    <cfoutput>
    .rt {
        font-weight: #variables.baseSize.fontWeight#;
    }
    @media only screen and (min-width: 360px) {
        .rt {
            #rt(1.2,1.68)#
        }
    }
    @media only screen and (min-width: 390px) {
        .rt {
            #rt(1.224,1.68)#
        }
    }
    @media only screen and (min-width: 420px) {
        .rt {
            #rt(1.248,1.68)#
        }
    }
    @media only screen and (min-width: 450px) {
        .rt {
            #rt(1.272,1.68)#
        }
    }
    @media only screen and (min-width: 480px) {
        .rt {
            #rt(1.296,1.68)#
        }
    }
    @media only screen and (min-width: 510px) {
        .rt {
            #rt(1.32,1.68)#
        }
    }
    @media only screen and (min-width: 540px) {
        .rt {
            #rt(1.344,1.68)#
        }
    }
    @media only screen and (min-width: 570px) {
        .rt {
            #rt(1.368,1.68)#
        }
    }
    @media only screen and (min-width: 600px) {
        .rt {
            #rt(1.392,1.68)#
        }
    }
    @media only screen and (min-width: 630px) {
        .rt {
            #rt(1.416,1.68)#
        }
    }
    @media only screen and (min-width: 660px) {
        .rt {
            #rt(1.44,1.68)#
        }
    }
    @media only screen and (min-width: 690px) {
        .rt {
            #rt(1.464,1.68)#
        }
    }
    @media only screen and (min-width: 720px) {
        .rt {
            #rt(1.488,1.68)#
        }
    }
    @media only screen and (min-width: 750px) {
        .rt {
            #rt(1.512,1.68)#
        }
    }
    @media only screen and (min-width: 780px) {
        .rt {
            #rt(1.536,1.68)#
        }
    }
    @media only screen and (min-width: 810px) {
        .rt {
            #rt(1.56,1.68)#
        }
    }
    @media only screen and (min-width: 840px) {
        .rt {
            #rt(1.584,1.68)#
        }
    }
    @media only screen and (min-width: 870px) {
        .rt {
            #rt(1.608,1.68)#
        }
    }
    @media only screen and (min-width: 900px) {
        .rt {
            #rt(1.632,1.68)#
        }
    }
    @media only screen and (min-width: 930px) {
        .rt {
            #rt(1.656,1.68)#
        }
    }
    @media only screen and (min-width: 960px) {
        .rt {
            #rt(1.68,1.68)#
        }
    }
    @media only screen and (max-width: 360px) {
        .rt {
            #rt(1.2,1.68)#
        }
    }
    </cfoutput>
    
    

    public by simonwalker  195  1  4  0

    Magento 2 Responsive E-Mail Template Extension By FME

    Magento 2 Email Templates extension helps you customize emails for better communication with the buyers and users of your eCommerce website. With 3 different themes, you can choose an appealing layout and design for the transactional emails. Magento email templates sets you free to select between Blue Lagoon, Black and Red Tux, and Orange Peak whic
    // Enter here the actual content of the snippet.						

    public by maholtz  2686  0  6  0

    bootstrap Responsive-Modus Anzeige

    Zeigt an, welche Breiten-Definition gerade aktiv ist
    <div class="box">
        <div class="visible-xxs">xxs</div>
        <div class="visible-xs">xs</div>
        <div class="visible-sm">sm</div>
        <div class="visible-md">md</div>
        <div class="visible-lg">lg</div>
    </div>
    • Public Snippets
    • Channels Snippets