Can you see the image I used as the header?
From the CSS we know that in order for an image to cover the entire width of the screen it is necessary to set the style max-width: 100%.
Using the Simple Custom CSS plugin I wrote
.wp-block-image img {
max-width: 100%;
}
but it doesn’t seem to work. I'm running WordPress 6.1 with Twenty-Twentythree theme.
Is there a better solution?
Related
Kept failing to make the content page full width. How do you search where in the CSS to edit for the Wordpress content to display full width?
Tried going to stylesheet.css and searched everywhere to make "max-width: 100%;", but still no luck, perhaps I'm changing the wrong class?
Example link: https://ocelink.com/startup-apply/
Plugins:
Elementor page builder
Theme:
RARA Business
Not only here you need to change
.full-width #content .content-grid {
max-width: 100%;
margin: 0 auto;
}
but also take a look at this style
.elementor-section.elementor-section-boxed >
.elementor-container {
max-width: 1140px; // here you have a limitation
}
The above style is in two places so you need to change there.
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;
}
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;
}
using themeforest 'TheGem' theme and Visual composer elements.
The image carousel is not responsive, on small screen its overlap each other, but on big screen its shows 3.
I trying to fix it trough CSS, but not working,
any solution?
.vc_carousel-slideline {
max-width: 100%;
}
.vc_images_carousel {
max-width: 100%;
}
TIA
Try the following:
.vc_images_carousel{max-width: 100%;}
No need for:
.vc_carousel-slideline{max-width: 100%;}
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