All other products thumbnails are equal in size, but for some reason one specific products thumbnail image is noticeably larger than the other ones. We've adjust the image size on photoshop to mirror the others and it's still bigger. We even lowered the image size about 30% smaller than the other products images and it's still loading up equally big. What can we do to fix this?
at custom.css
find
.item-feature-product .ProductImage img {
max-height: 650px;
width: auto;
}
replace with below CSS
.item-feature-product .ProductImage img {
height: 350px;
width: auto;
}
Related
Is it possible to constrain the aspect ratio of a window in an NW.JS app?
I have content which is 800 x 600. In the package.json manifest, I can define the window settings as...
"window": {
"toolbar": false
, "width": 800
, "height": 600
, "min_width": 800
, "min_height": 600
}
I use CSS to preserve the aspect ratio of the content and to fill the window as well as possible:
html, body{
margin: 0;
height: 100%;
}
main {
position: relative;
width:100vw;
max-width:133.3333vh; /* max-width / width = aspect ratio */
min-width: 800px;
height:75vw;
max-height:100vh; /* max-height / height = aspect ratio */
min-height: 600px;
margin: 0 auto;
}
However, if you make the window too wide, a blank area appears on either side. If you make it too tall for its width, a blank area appears at the bottom.
Is there a setting that forces a given aspect ratio?
Or is there now a window resize event that I can listen for so that I can apply window.resizeTo(height*1.333,height) as soon as the window's size is changed?
There does appear to be a resize event:
https://github.com/nwjs/nw.js/issues/799
https://github.com/nwjs/nw.js/wiki/window
You could use code like this to set your event listener:
gui = require('nw.gui');
w = gui.Window.get();
w.on('resize', yourFunctionHere);
but be careful about changing the window size in the handler (e.g. using resizeTo()) as that will trigger a resize and could cause all kinds of chaos. It might work to make the resize conditional on the current aspect ratio, but I can imagine you could still run into problems if you hit some limit or other. Offhand I don't know if there are some facilities (akin to event bubbling &c) that would help in this situation.
on the home page the slides are visible but till the width of the screen is reduced to around mobile size at which point the slides disappear.
I tired everything I could think of played with .flexslider .slides img ...
currently i have it set as .flexslider .slides img {width: auto; height: auto;display: block; max-width: 100%;margin-left:auto;margin-right:auto;}
thanx in advance
issue resolved i had another code which was intercepting this ...changing that solved the issue
Please refer to the image below:
It's cutting off some of the table data because of the width. My table width is more than 1000 px. I know The default document size for ABCpdf is 612 by 792.
Using the code below to set document width and height
double w = doc.MediaBox.Width;
double h = doc.MediaBox.Height;
double l = doc.MediaBox.Left;
double b = doc.MediaBox.Bottom;
doc.Transform.Rotate(90, l, b);
doc.Transform.Translate(w, 0);
doc.Rect.Width = h;
doc.Rect.Height = w;
I want to display all tabular data. Do I need to modify my table size? Or do I need to modify the document page size of the pdf?
How could i resolve this issue?
Thanks,
Siva
After reviewing the HTML, I think that I can give you a few tips on how to resolve your issue:
1- Use the Gecko Engine for PDF Rendering:
doc.HtmlOptions.Engine = WebSupergoo.ABCpdf9.EngineType.Gecko;
The Gecko Engine provides better Css compliance when rendering in ABCPdf.
2- In your Css you have overflow-x set to scroll for the inner-container. This causing the behavior that you are seeing. I would add the following Css to the bottom of the Css:
#media print
{
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: visible;
width: 100%;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: visible;
}
table
{
width: 100%;
}
}
Notice the #media print which makes the css only effective during print and would not affect that way it shows on the screen.
3- Finally, you can try playing with the browser width:
doc.HtmlOptions.BrowserWidth = 1200;
The only problem with the BrowserWidth property is that it will affect the zoom on the document. All the text fonts will appear smaller.
Good luck...
You haven't specified if you are converting an HTML page to PDF- but I assume you are. If that is the case, have you looked at the browser width property? Look into the XHTMLOptions object properties- it will help you fine tune the rendering:
http://www.websupergoo.com/helppdfnet/source/5-abcpdf/xhtmloptions/
Here is an excerpt from my code:
xtype: 'image',
src: 'http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png',
left: '50%',
top: '30%',
height: '3.515625%',
width: '13.28125%'
The image is cutoff - only a small chunk the size of my Image object appears. How do I fix this?
Try the config "mode: 'image'", this will embed your image in a img tag, respecting your width and height. Or set the background-size in CSS
Edit: also, are you converting a layout in pixels to %? Im currently doing the same thing except in em. Kinda a pain in the a**. Got any useful tips?
Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?
Ideally this would be done through CSS or Javascript, somehow creating a semi-transparent white layer over an image when moused over. Currently I just have Photoshop process images with +10% brightness, and do the rest in Dreamweaver with find/replace.
It'd be nice not to have to create separate rollover images for each picture. Thanks!
Using css, you can use something like this:
#navigation a {
background:url(image.png) no-repeat;
filter:alpha(opacity=100);
opacity: 1 }
#navigation a:hover {
filter:alpha(opacity=80);
opacity: 0.8 }
More info here
With images you don't always have to create a new image for rollovers, you can edit the CSS to decrease the opacity of the element:
.myElement
{
background.image: url(path/to/file/image.png);
}
.myElement:hover
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Also I think you'd benefit from looking into CSS Sprites:
CSS-tricks sprites tuorial
A list apart's CSS sprites
Css sprites.com generator