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
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.
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;
}
http://www.shaunhillphotography.co.uk/
I have an image scroller on my front page and I want it to span the width of the white space. I had it working earlier but accidentally removed the code when I was tweaking the customer CSS.
It looks like it relates to:
#riva-slider{
}
I don't know what I need to put in to get the positioning correct.
Any help would be gratefully appreciated.
You can try increasing the width of the shell and using margin-left to push it to the edge of whitespace.
#riva-slider-1-shell {
width: 1000px;
margin-left: -25px;
}
Try to add in your CSS file:
#riva-slider-1-shell {
overflow: hidden;
}
I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/
Here is what I have implemented: http://www.preview.sharonblance.com/
I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.
I think that the plugin uses the browser full height though and I want to try to change this.
Can anyone suggest how I could do this?
Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232
First, you need to add this javascript (I placed it right after the $.supersized call):
$('#supersized li').height($(window).height() - 154);
Then, add some CSS:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
Finally, you might want to disable the supersized overlay while debugging:
#supersized_overlay { display: none !important; }
Good luck!
#supersized li for this class add top: 154px; I mean height of the header. hope it will work.
I guess this is already solved but here it is anyway!
find your supersized.css file and edit as follows:
#supersized img {
padding-top:154px;
}
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}