I want to make the pictures of the product smaller. I also want to add another product per each row so it is 4 products instead of 3 products per row.
My Website:
http://www.notsomefantasy.com/
You can set 4 products per row on the desktop view for this particular theme by adding the following piece of code to the bottom of Customize Design > Advanced > CSS:
#media screen and (min-width: 1025px) {
.product-card {
width: 25%;
}
.product-link .product-image {
height: 50%;
}
}
Related
I am currently working to replicate a design and I am using css grid for the layout.
I applied the css gap attribute and gutters were created between the rows and columns. However, a gutter was created outside the last row and I have been battling to fix it. from what I know about grid gap and also from css Tricks,the gutters are only created between the columns/rows, not on the outer edges.
Following is a screenshot of how it looks like after my implementation current look You can notice the gutter at the bottom of the last row on the right. I do not want the gutter there, I just want the row to take up the space at the bottom. This is the code for the grid container.
.App {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 25px;
width: 70%;
height: 55%;
background-color: var(--pry-blue);
}
I am using TableView QML component, where each column width is set to the table total width divided by number of columns. This introduces some fraction parts and in result, a horizontal scrollbar is almost always visible in the bottom.
But I don't want to disable scrollbar as I have ability of changing column width and because of that scrollbar may be needed. So my problem is about initial showing of this TableView component. I want to get rid of that scrollbar when component is shown first time, but don't disable it for future usage.
I am new to QML and don't know all aspects of it, but solution that came to me is to set width of each column as I do, then for the last one get sum of all previous columns and set it's width to parent.width - that sum. Can you please help me to understand how can I implement this using QML?
columnWidthProvider is calculated once at adding column. I cant reproduce your bug with this. contentWidth become same as width
TableView {
id: table
anchors.fill: parent
columnWidthProvider: function (column) {
console.log(parent.width , columns, parent.width / columns)
// wdth is 0 here
return parent.width / columns
}
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AsNeeded
}
//....
}
But i had same issue in another view. Solution was:
Flickable {
id:view
ScrollBar.horizontal: ScrollBar {
policy: (view.width - view.contentWidth < -3) ?
ScrollBar.AlwaysOff : ScrollBar.AsNeeded}
}
}
https://developers.google.com/chart/interactive/docs/gallery/ganttchart
Is it possible to add labels on the Gantt chart durations, like the below screenshot?
As WhiteHat said, there is no built-in option.
For my specific case (I always have the same structure in my Gantt graph) I did the following (to place some DIVs on top of the bars - with these DIVs you can do whatever you want):
// callback after draw (afterDraw() function is called after chart is drawn)
google.visualization.events.addListener(chart, 'ready', afterDraw);
function afterDraw(){
// the container element to append our generated DIVs (with the labels)
// it has to be outside the SVG element, but inside the chart container
var toContainer = $('#chart_div > div > div');
// in order to create DIVs to place them on top of the bars, we first need to get bars SVG/RECTs positions and sizes
// in my case, the RECT elements with the necessary top/left/width/height are in the 6th G element
$( "#chart_div g:eq(5) rect" ).each(function() {
toContainer.append("<div style='top:"+$(this).attr('y')+"px; left: "+$(this).attr('x')+"px; width: "+$(this).attr('width')+"px; height: "+$(this).attr('height')+"px;text-align: center;position:absolute;line-height:2' >Some text</div>");
});
}
I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks
You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/
I'm trying to achieve a 5px gradient around all edges. I've found multiple ways to do this in all browsers except for IE (-mos-border-colors and apply 5 separate colors, border-image, etc...).
I've tried CSS3 Pie, but can't seem to get it to function at all in IE (any version). There are multiple sizes for this column, so images would be a hassle.
Any one have any solutions for this?
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
Maybe box-shadow is an option for you, enabling monochrome gradients/shades…
header {
box-shadow: 0 1em 2em #fff;
-webkit-box-shadow: 0 1em 2em #fff;
-moz-box-shadow: 0 1em 2em #fff; }
Does it really need to look identical in every browser?
Some cross browser solutions: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
I've tried CSS3 Pie, but can't seem to get it to function at all in IE
(any version).
CSS3-Pie is a bit tricky. Try adding position:relative; to the element you want to apply border image to.
csspie cannot resolve relative paths from your stylesheet to your images. If you do not specify absolute paths from document root to your images, css pie cannot find them.
See this issue here:
http://css3pie.com/documentation/known-issues/#relative-paths