Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
I have a Wordpress blog at www.cattywampur.com
I really like the free theme I am using, I just want the content part to be a bit wider. There is a lot of padding to the left of the blog post writing and to the right of the right side bar.
Looking in inspect element I do not see any padding values. I see a width value for content but if I increase it, it makes the right sidebar disappear like so:
It looks like .post-inner is the class you're going to want. If you wish to remove "padding" from the post area you could add something like the following to style.css in your child-theme:
.post-inner {
max-width: 90%;
width: 700px
}
If you'd like to increase the post width you'll have to also decrease the width of the sidebar, otherwise the sidebar will clear the post content and end up on the bottom of the page. Something like the following ought to do the trick.
.content {
width: 76%;
}
.sidebar {
width: 22%;
}
Use the two blocks of CSS in conjunction in order to achieve an effect like this!
Note: I've also added padding: 30px 0; to .post-inner in order to even things out.
I think you should change (or add) attributes to class post-inner ( .wrapper section .section-inner .content .posts .post .post-inner )
.post-inner {
max-width: *your value - i suggest use %*;
width: *your value*;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need to remove the navbar in my Hestia Theme.
I tried .navbar {display:none;} and when I use it the top bar gets white and I need to remove it.
Could you help me with this problem, please?
Kind regards
As it showed in the piture
In Wordpress sites the main tag has a margin at the top. This is causing the white bar above the page after you removed the navigation. You can "deactivate" this with:
.main, main {
margin-top: 0 !important;
}
Edit: I have checked out your site and have found the reason. There is some top padding defined by inline CSS at the article tag, that's get added by some JavaScript, but I cannot tell you why.
But you can still turn it of with:
.elementor-page .pagebuilder-section {
padding: 0 !important;
}
This CSS rule is an extended rule already applied by Elementor, buts get overwritten by this inline CSS. I just added the !important to fix it:
If that was helpful and you used this answer to solve your problem, it would be nice if you mark this answer as accepted. If this answer doesn't work or you have other questions, please response with a comment.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my .screen class to be on its own line. Assuming I can not change the current layout.
<div class="app">
<div class="screen"></div>
</div>
I though that display: block; would do the trick but no.
.screen {
display: block;
}
As of now it all sits on one line. I am only handy with flex and I can't think of anyway flex will help me here.
If you're using flexbox flex-wrap can help. Make the first child 100% wide and put flex-wrap: wrap to the parent.
By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS. There is probably override of <div> style.
Try to use !important to prioritize your style:
.screen {
display: block !important;
}
Also, check the style of div in browser's inspector and provide that info – it would be useful to get more details
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have my whole site responsive but the data i have copied from the vendor site is not responsive i dont know why i have now copied 200 products and not willing to delete and do the work again.
Can anyone guide me my site when viewed in mobile the data gets outside the screen and is being cropped rather then being mobile friendly.
Link is : http://octa.pk/product/unifi-voip-phone-executive-ubnt-unifi-voip-in-pakistan/
I found that your description div has Width in element style, which might be coming from Javascript. An Easy and non-tested fix would be adding below CSS. ( Note: It's example CSS that fixes the main issue. )
#media only screen and (max-width: 600px) {
.comContent {
max-width: 100%;
}
.comProductFeature__content.col--lg12 {
max-width: 100%;
}
.js-waypoints-center.row.comProductFeature.comProductFeature--center.unifi-voip-executive-scalable-system-management.js-animate-slide-up {
padding: 0 10px !important;
}
}
Check fix width here
https://nimb.ws/WHI1GY, Anyway, If you have used the same classes to all 200 Products this will fix it.
If you have copy-pasted these HTML from somewhere, You will have to go through all of the product pages and need to write more CSS code. As Above code is just an example to fix it.
Hope, This helps you.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to make the class .cart to be fixed at the bottom the the screen at all times like a fixed footer. Currently user has to scroll all the way to the bottom of the page to view this div. I have tried the following css but to now avail.
Although this code works fine for my in JS fiddle but not on my webpage (link below)
JS Fiddle -- > http://jsfiddle.net/Lec5yu1d/2/
My webpage -- > http://omgjewelz.com/create-your-set
.cart { position: fixed;
left: 0;
bottom: 0;
width: 100%; }
Hi adding this code to your style will make it work,
You need to make footer sticky along with positioning it, So here I added bottom:0px for you.
footer.site-footer {
position: sticky;
bottom: 0px;
}
For better view, I will suggest you to use background white behind the text div, as right now its transparent so it will mess up with content,
.footer-bottom {
background: white;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a sticky navigation, but my problem is the navigation jumps a little as I begin scrolling
http://testdev.co.za/tyme/info/
Can anyone show me in the css where the problem is.
You need to fix the position of your navigation bar using this code
position: fixed;
may be it will help you
You need to remove the padding-top: 25px from the .l-canvas.headerpos_fixed .l-header.state_sticky class in custom-vb.css.
Then you need to add padding-top: 25px to the .l-canvas.type_wide .l-subheader, .l-canvas.type_boxed .l-submain class in the same css file.
Sooooo, in custom-vb.css:
.l-canvas.headerpos_fixed .l-header.state_sticky {
}
.l-canvas.type_wide .l-subheader, .l-canvas.type_boxed .l-submain {
min-height: 100px !important;
padding top: 25px;
}
Any problems let me know.