I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
Related
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
I would like to have in Wordpress the normal text width 660px and the images between text wider than the text (max-width:1000px).
How can i handle that?
You could give images negative left and right margins. In order to work, though, they shouldn't be max-width, but just width:
.container {
width: 660px;
}
img {
width: 1000px;
margin-left: -170px;
margin-right: -170px;
}
Another alternative, use a grid system and great a new .row or whatever your grid system calls it for each image, with columns that are wider than the one used for the text.
Kendo UI treeview triangles are too tiny for my users.
I want to make them bigger.
If those are the only icons that you want to make bigger, you can try creating two images with the desired size and then define the following styles:
#grid .k-hierarchy-cell > .k-icon.k-plus {
background-image: url('/images/plus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
#grid .k-hierarchy-cell > .k-icon.k-minus {
background-image: url('/images/minus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
Here I create an image and saved in /images/plus.png for expanding the details and size 32x32 pixels and another saved in /images/minus.png for collapsing it.
With the CSS selector I'm limiting its scope to a grid which id is grid.
You will need to manually edit 'Default/sprite.png' located in you styles folder together with other kendo styles. This post should get you started >> http://www.kendoui.com/forums/ui/general-discussions/using-the-kendo-ui-theme-builder.aspx#Bi_T-0dZtEuYNyT-ypDIlA , use attached *x2.psd sprites or edit files further in photoshop.
I recently tried applying a gradient background to a webpage using only CSS3.
while testing out the following code:
body {background: -moz-linear-gradient(top, blue, white);}
The result was:
Not exactly what I was looking for...
Any idea what is going on?
OS is Win7 64bit and Firefox 4.
Thanks!
you may want to add no-repeat to that background property…
or set a height to the <body> (and the <html>) like so:
html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }
This is happening because the height of the body is small, and by default the background is repeating.
You can either make it not repeat:
body { background-repeat: no-repeat; }
or make the height of the container (html) the size of the window:
html { height: 100%; }
though note that the latter can sometimes have unexpected effects when scrolling.
I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools.
I tried z-index, tried explicitly setting overflow:visible, no luck at all.
UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
Anyone has an idea how to work around that?
I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden
/* IE8 RGB A workaround */
div.ie_rgba_fix
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}
Try making the elements inside the absolute positioned element position:relative, and/or add a wrapper around all the elements in that absolute positioned element and relative it.
i took a tip from the checked answer here & the linked question, but didn't want to use an empty DIV (especially because other browsers don't need it).
Instead, i set up IE8-specific CSS that uses the container DIV's :before pseudo-element.
However, pseudo-elements are styled content, not DOM objects, so the -ms-filter property is useless. To compromise, i use a PNG matching the original filter i wanted (actually a data: URL, but either works) as the background-image.
i force the pseudo-element to the full size of the container, absolute-position it, and ta-da, the child element is visible outside the parent, and the parent still gets a transparency background.
.container.ie8 {
background-color: transparent;
position: relative;
}
.container.ie8:before {
background-image: url("data:image/png;base64,...");
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}