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.
Related
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?
I've a child Twenty Twenty-One theme and I want to make the content area in full with. I don't want to use any plugin. I've searched and found that adding following code in CSS may work but for me it's not working.
How to do it with css if it is possible?
Just to clarify, in 2021 there header, footer etc are are wider than main content area such as post content, page content etc.
How do we make the content area (post, pages, listings) to have same width as header/footer?
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 87rem;
width: calc(100% - 8rem);
}
In WordPress to change style you need to use inspect code and get the CSS definition and then modify it. It's not that hard.
Try following code, You can see more explanation on https://ajaytechie.com/wordpress/how-to-change-width-of-post-content-area-in-twenty-twenty-one-wordpress-theme.html on my blog you can also see it live in action.
/* Change the content width to be same as header/nav/footer's width */
#media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
Please, use the following style
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
width: 100%;
max-width: 1240px;
}
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'm using the wp-theme Expositio:
http://expositio.wpshower.com/sample-page/
and I want to make the text and other content (galleries) to fill the whole screen and not just like 80 % from the left side.
I already tried to change all width settings in the style.css to 100% but nothing changed at all!
Where else could I look for the hidden width-restriction?
On line 1356 style.css is the rule body.page.hentry, .page-contentwith the property max-width: 620px;change the to 100%. Must working.
This works on the link you provided OP
body.page .hentry, .page-content {
max-width: 100%;
width: 100%;
}
The other answers seem to have missed the width property along with max-width. I'd recommend that you make the changes on a separate stylesheet as this makes updating the theme easier. Also make sure your new styles override or replace the existing ones obviously.
You should try this, on line 1054 of your style.css
body.page .hentry, .page-content {
width: 100%;
}
wow, I finally found it. It wasn't enough to set the body.page hentry, .page-content to 100% but also the
.site {
min-width: 100%;
}
that finally made it.
thanks for all your answers
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}