The global font size in foundation-6 is 16px and can be altered in _settings.scss. Is there a way to make this size varies depending on the screen width? I want to decrease this size to 13px for small screens. I know there is something like that for the headers but I am asking here for the global size. Thank you!
I would probably look to add a set of media queries to your app.scss file to set the font size for each breakpoint. This make sense?
I would do something like this (feel free to use Foundation's function to convert the value in px to rem or em):
body{
font-size:13px;
#include breakpoint(medium) {
font-size:$global-font-size;
}
}
Related
Please help with these two issues, I will happily pay$ to get these two obstacles out of my way. I got this template from envato and my skills are very slow progressing.
http://philpadilla.com/demo/project.html
Fashion Models
Mobile ยท Web
How do I edit the css to expand the image heights to 100%? My graphics will be stacked just like the template but they will vary in height and I need them to not have the tops and bottoms of the images clipped off. I have been digging and cant seem to find the solution. I also want to turn the rollovers off on all the project images. Does anyone have it in their heart to help please?
The images on your template are already with a predefined value, to change that, you can:
Edit the inline style of your image
Create a external stylesheet to change the height
You can try setting height to 100% (height:100%;)
The easiest way to turn the rollover of, is creating a new stylesheet (style.css) and including it on your code (<link rel="stylesheet" href="style.css">)
thumb-overlay { display: none; } /* This code will disable the rollovers */ }
img { height: 100%; } /* And this one will set all pictures height to 100% */
I just created a resource file for my project, which got 5 prefixes (Window, background, etc).
My main problem is that, when using the Qt Designer, I go to stylesheet, open it up, Add resource -> background-image.
Unfortunately my picture is way too big for my window, and I can't seem to put it to scale using designer.
After reading some topics on the forums, I have tried to put this in the "stylesheet edit" :
background-image: url(:/background/Backgrounds/Fondecran1.jpg) 0 0 0 0 stretch stretch;
in place of
background-image: url(:/background/Backgrounds/Fondecran1.jpg);
Can anyone help me put it to scale ?
Is there a way it can "adapt" as well as it can to changes in the window size ?
Thank you all in advance for your answers.
Instead you may need to use border-image.
Look into the below content in the link provided.
A background-image does not scale with the size of the widget. To provide a "skin" or background that scales along with the widget size, one must use border-image. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case, when both of them are specified, the border-image draws over the background-image.
http://doc.qt.io/qt-5/stylesheet-customizing.html
I use foundation 4 with SASS. but I can't really find how to change default font-size.
For my language, default font-size is too big.
I have tried to change some part. as you may know, it's related full-width as well.
1st of all I have changed full width size : $row-width: em-calc(1200)
1000 to 1200. I need wider. is it correct way to change full-width?
I have tried to change font size.
$base-font-size: 100% !default;
$em-base: 16px !default;
When I change these. it's related full width.
Then How Can I change font-size and full-width? if you have sass, please let me know which file I need modified.
Not 100% clear what you are asking for in your question, but I hope I got it right - you want to know how to change the font without changing the grid size right?
Then the answer can be found in the documentation:
/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
/* If you want your base font-size to be a different size and not have it effect grid size too, */
/* set the value of $em-base to $base-font-size ($em-base: $base-font-size;) */
$em-base: 16px !default;
So basically just set:
#import "foundation/variables";
$base-font-size: 4px;
$em-base: $base-font-size;
Change the em-base back to the default and you'll see that the grid also changes accordingly to $base-font-size. You are also doing the right thing by setting the row-width.
If you'r having trouble getting the SASS function em-calc() to work, make sure you call it after #import "foundation/variables"; I don't know why em-calc() is used in the documentation, maybe the sourcecode on git is outdated - but I had to use emCalc(#px) - ie: emCalc(2000px);
This is currently an issue, Github repo.
Until it is fixed in a new version, this changes the font-size without changing the grid.
$base-font-size: 120% !default; // pixels to percent
body { font-size: $base-font-size; } // set the body font size to $base-font-size variable
So after reading Stack Overflow and the web, I've gathered that there are two main tricks to achieving 100% height:
Set height:100% on both the HTML and BODY
Set your element to have either:
height:100%, or
top:0, bottom:0, position:absolute
However, even with those tricks I'm having difficulty setting the height of an absolutely positioned DIV to a true 100%. I can get 100% of the viewport size, but if the user scrolls down at all it becomes apparent that the div doesn't truly have 100% height.
I've made a simple JS Fiddle of the situation here:
http://jsfiddle.net/9FEne/
My question is: does anyone know any further tricks to get a true (ie. content-height, not viewport-height) 100% height absolutely positioned div?
Sorry, I missed the real question before and thought you wanted the window filled. If the issue is that the contents are longer than the window then what you need is to add position:relative to the body. http://jsfiddle.net/9FEne/7/
What is happening is that when you absolutely position something it positions (and sizes) relative to the nearest positioned element. If you don't tell it to position to the body then it will position to the window.
You can use jQuery to achieve this trick
var h = $(window).height();
$('#yourdiv').height(h);
I would use javascript to assign the height and width equal to document's height and window's width respectively; I've modified your jsfiddle to demonstrate it here:
http://jsfiddle.net/9FEne/1/
I have a ListView, and I don't know how big to make the ImageLists for large and small, and group header icons. How big should they be?
I would suggest
32x32 pixels for large and group header
ex. in MFC
// The pointer to my image list.
extern CImageList* pmyImageList;
pmyImageList->Create(32, 32, ILC_COLOR8, 0, 4);
small might be 16x16.
see here for possible insight into Microsoft's sizing recommendations.
http://msdn.microsoft.com/en-us/library/ms997636.aspx