Been working with the Zurb Foundation 3 framework.
I'm trying to set at smaller width than 1000px in the _settings.scss, but for som reason it only goes down to 770px even if I put in a smaller number. Here is what I did:
Executed compass: compass watch projectname
Edited _settings.scss: $rowWidth: 660px;
Set markup to:
<div class="row">
<div class="twelve columns">
<h1>Heading</h1>
<p>Some message here ...</p>
</div>
</div>
Here is how i solved it:
Created a _overrides.scss file: sass/_overrides.scss
Imported the file in app.scss: #import "overrides";
Added this to the _overrides.scss file:
#media only screen and (min-width: $rowWidth) {
.row {
min-width: $rowWidth;
}
}
#media only screen and (max-width: 767px) {
.row {
width: $rowWidth;
margin:0 auto;
}
}
Now I can control the width in _settings.scss by changing $rowWidth, for example: $rowWidth: 660px;
Just one little issue: if the $columnGutter is less than 30px there will be horizontal-scroll if the screen-size is less than 660px.
Related
i'd like to add an image as an icon to a navigation button in the header. is this possible? how should i go about it? here is my current code.. it doesnt work:
in the html code:
<ion-nav-bar class="bar-positive custom-dark">
<ion-nav-buttons side="left">
<button class="button" style="background: #1e1e1c;" ng-click="doSomething()">
<i class="icon home"></i>
</button>
in the css code:
.home
{
background: #1e1e1c;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
background-image: url('img/finalimages/home.png');
display: inline;
}
You could create a custom icon which can be put as your default back button alternative in ionic.
By doing this way you are getting a number of custom icons which can be used throughout your project.
This can be made by following this tutorial:here
Is it possible to reset font-size when slider is in 'responsive' mode?
I have a slider that woks very well until the screen size goes down below about 740px wide. Then type becomes almost impossible to read.
So I tried to override font-sizes with media queries. No luck. Turns out transform: scale(0.32298) - or some decimal like that - gets applied to one of the parent containers. Tried overriding that too, but didn't get far with that either.
Is there a 'canonical' way to preserve/override scaling effects? ... callbacks, etc.?
EDIT:
transform appears as an inline style:
<div style="position: absolute; top: 0px; left: 0px; width: 1024px; height: 654px; transform-origin: 0px 0px 0px; transform: scale(0.34454345703125);">
it appears in the first child of <div id="slider1_container"></div>
So, I think you have some content elements as below in any slide in your slider.
<div style="...font-size: 50px; ...">You text</div>
Please move inline styles to css block, and then you get following format,
<div class="classname">You text</div>
In this manner, you have chance to apply different font-size on various screen.
<style>
#media only screen and (max-width: 480px) {
.classname {
font-size: ...px;
}
}
#media only screen and (max-width: 768px) {
.classname {
font-size: ...px;
}
}
</style>
Ended up using cycle2 plugin. Turned out to be pretty flexible and was able to restyle contents with media queries without any issues whatsoever.
I've looked and looked for what should be a simple answer, and for some reason I can't find it.
I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.
When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.
You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.
I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.
Please use class name to define css for slider1_container.
.slider1_container {
position: relative;
width: 960px;
height: 628px;
/*border: 20px solid #E1D9CC;*/
overflow: hidden;
/*margin: 90px auto 0;*/
margin: 0 auto;
padding-bottom: 0;
}
And remove the following codes,
#media only screen and ( max-width: 1152px ) {
.slider1_container {
max-width: 92%;
border-width: 15px;
}
}
#media only screen and ( max-width: 800px ) {
.slider1_container {
margin-top: 10px;
border-width: 10px;
max-width: 90%;
}
}
#media only screen and ( max-width: 640px ) {
.slider1_container {
border-width: 5px;
}
}
And also, jssor.js is missing in your code. Please replace
<script src="../js/jssor.slider.js" type="text/javascript"></script>
with
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
Edit
<div id="slider1_container" class="slider1_container" ...
Move thumbnails
Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
Reference:
http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
http://www.jssor.com/development/reference-ui-definition.html
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}