There is a main CSS file (style .css) in my WordPress theme. I'm trying to reduce the height of an image banner by reducing the value oh the height: 100vh; to height: 50vh;
I changed it to 50vh but the banner height doesn't change. But when I right-click on Chrome->Inspect and change it there, then it works. Can anybody tell me if it works in the chrome inspect then why doesn't it work in the actual CSS file? Is any other way in which I can reduce the 100vh to 50vh?
You need to add !important to the end of the style.
element {
height: 50vh!important;
}
Related
I'm trying to reduce the size of an input box on a mobile device and the css won't work.
I used google dev tools to get the name of the element (input#calc_shipping_postcode.input-text) but when I try and specify the width in CSS nothing happens.. the page is -https://ffe-dev.flowersforeveryone.co.za/flower-delivery/
the CSS i'm trying to use is -
input#calc_shipping_postcode.input-text {
width: 270px;
}
Can someone please tell me what i'm doing wrong? Thanks
The problem with your site is that width are set to 350px by inline styling.
This is caused from some wordpress plugin (maybe this set from WPBakey).
One solution is to find out what is causing this styling in wordpress then edit it.
Other fast workaround solution is to override ths by adding !important to your css property like:
input#calc_shipping_postcode.input-text {
width: 270px !important;
}
Instated of adding width in px use %. will work in all devices.
try this.
input#calc_shipping_postcode {
width: 100% !important;
max-width: 350px;
}
I am trying to stylize this frame in the image above on this website here by taking off the scroll bars, both horizontally and vertically, Also, i'm trying to increase the width, but all efforts seems futile.
#scrapeazon-wrapper {
position: relative;
width: 100%;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
}
#scrapeazon-iframe {
width: 100%;
height: 90%;
border: none;
}
nothing over here can be overwritten for some reason?
HTML shortcode for integration on wordpress;
[scrapeazon asin="B074TBRMZK" width="800" height="300" border="false" country="US"]
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
But, you can edit CSS at Scrapeazon plugin settings.
There are several ways that you can style the scrapeazon-reviews iframe: by editing your theme’s stylesheet, by adding parameters to each shortcode, or by using the plugin’s built-in responsive style sheet.
To style the iframe in your theme’s stylesheet, add classes named scrapeazon-reviews and scrapeazon-api to your stylesheet, then add the width, height, border, and other parameters you want to style to those classes. For example, copy and paste the following into your stylesheet to make the iframe a 540×540 pixel square with no border:
.scrapeazon-reviews {
width: 540px;
height: 540px;
border: none;
}
.scrapeazon-api {
width: 540px;
}
To style the iframe by using the shortcode, add width, height, and border as parameters to the shortcode. For example, to accomplish the same formatting as above in shortcode format, use the following shortcode:
[scrapeazon asin="<your asin>" width="540" height="540" border="false"]
Append a percent (%) symbol to the width and height values if you are specifying your those values in percentages rather than pixels. You can optionally append ‘px’ instead of the percent symbol to use pixels. If you specify digits only, ScrapeAZon will default to pixels.
To style the iframe by using the built-in responsive style sheet (if your site has a responsive design/theme), select the «Use Responsive Style» checkbox on the ScrapeAZon Settings page.
I am using svg with grunticon, and I want to set the hight and width to 100% of svg tag,I know that it can be done with js but can it be done by style or css or grunt options?
If is please add example
I am using the html like this:
<div class="icon-napoleon" data-grunticon-embed></div>
The SVG image is generated inside your div element, so the CSS should look like this:
.icon-napoleon,
.icon-napoleon svg {
width: 100%;
height: 100%;
}
Please note that parent element must have width and height defined. The only exception is when parent element is a block, than you do not need to set the width (it is 100% by default, still the height is required).
I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with width: initial, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.
Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.
How can I adjust the css so that the div is just large enough to fit its contents?
Becuase the css by default is:
.ngdialog.ngdialog-theme-plain .ngdialog-content {
max-width: 100%;
width: 450px;
}
If you override the width: 450px, then as a div - a block level element - it defaults to full width.
You can change it to display: inline-block to make it "just fit"
You can use css property display
display:table;
if you just want to show html table in ngDialog, this will work perfectly and will fit your table into it.
Make sure your table width!
In your JSFiddle, .ngDialog is attached to a div and doesn't overwrite it's CSS display: block; property, which is why box spans across the entire screen; it has nothing to do with the width property. Set .ngDialog to include display: inline-block; and remove any properties for width.
You can customize the ngDialog theme as below:
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-mine,
scope: $scope
});
I copyed the "ngdialog-theme-default" block from ngDialog-theme-default.css to mine.css, then change "width" and rename it to "ngdialog-theme-mine".
It works.
In word press, if you upload an image, and let it display in 100%: if it exceeds its containers width, the theme will either:
a) be broken, messing up the layout of the page
or
b) hide the extra width it cant display
This is for a non-fluid layout, of course.
The solution presented here:
http://lorelle.wordpress.com/2006/10/07/the-battle-between-image-width-and-column-width/
p img {
padding: 0;
max-width: 100%;
}
#header, #content, #footer, .widget {
overflow: hidden;
}
what this does, apparently is just making sure the image is displayed under 100% of the width of the objected where it's nested in
And the overflow: hidden is to make the extra bit disappear?
Well, this is not what i am looking for.
I am looking for a way (in css, preferably) to do this:
If image is too big, make it 100% of available width;
If image is not too big, make it its original size.
I've been setting <img width="100%" to solve this problem, but this will bring up problems in a fluid layout, such as the possibility of enlarged images.
edit: Well, apparently, the max-width style should work for the intended purpose. But in the Mystique theme user css of wordpress it's not working, and i cant' figure out why. Probably a conflict between measures taken by the theme itself regardig max-width. y.estamine.net/main/wp-content/themes/mystique/style.css <- somewhere here, i think.
The maximum content width should be set in functions.php. The example below is from Twentyten. This will prevent your large sized images from overflowing.
* Set the content width based on the theme's design and stylesheet.
*
* Used to set the width of images and content. Should be equal to the width the theme
* is designed for, generally via the style.css stylesheet.
*/
if ( ! isset( $content_width ) )
$content_width = 640;
Setting the max-width to a maximum value works for me. For example
div {
width: 500px;
height: 500px;
border: 2px solid black;
}
img {
max-width: 500px;
max-height: 500px;
}
Fiddle http://jsfiddle.net/t29yV/
Setting it to a percentage works too... so you may have something else happening.
Tested in IE7/Chrome/Firefox