I updated my style.css sheet to get rid of a white space at the top of my pages. I know exactly what line of code to edit because when I inspect the page and make changes I can get rid of the white bar. However, when I change this in the style sheet nothing happens. It saves my changes on the style sheet but when I go back to the inspector on the page it hasn't been changed. Is there something I need to do to make sure this change effects the right pages?
This is the section I have changed:
.page_content_wrap
{
padding: 0;
}
This is how it appears on the inspector:
.page_content_wrap
{
padding: 5em 0;
}
Well,you didn't mention about what Html/Css framework you are using. I think your css is getting overrided.Try with this
.page_content_wrap
{
padding: 0 !important;
}
Related
I am creating my new travel website https://airlineticketsbestprice.com. So I have downloaded a travel theme and updated my content.
Also, I have add some more section in home page (example call to action, popular destinations, subscribe newsletter and latest aticle ). But as I have noticed that there are much more space between these section, so I am trying to fix this through CSS file but issue still remain.
So could you please tell me which file and CSS file class should I change.
Kindly help me to send exact Css class file code.
Thanks
In your style.ccs you might change this:
p {
margin-bottom: 1.5em;
margin-top: 0;
}
to this:
p {
margin-bottom: [any number]em;
margin-top: 0;
}
or
p {
padding-bottom: [any number]em;
margin-top: 0;
}
Please note, that it will effect all your paragraphs on your website.
Or if you don't want to have any space after a paragraph use the Shift+Enter combo.
I'm trying to get rid of the following element or change its color if it's possible - it's not a border, it's a background image. It's code looks like that:
.col-2cl .main-inner {
background: url(img/sidebar/s-right-s1.png) repeat-y right 0;
padding-right: 340px;
}
My question is, how can I get rid of this element? I'm trying to completely remove it on dark version of my website, but I just can't - I feel like I've tried everything (background: none;, etc). I can't completely delete the file because I need it on light version of my website. My site:
Any new value you will assign for .col-2cl .main-inner will hide that image.
In your case, you should show dark mod or at least define how dark mode is implemented. Is it changing attributes or just changing class names?
if it is changing class names, you should define your css code according to that change, for example, let assume in dark mode, you added the new class name to any div tag parent of .main-inner as .dark-mode.
Then, you can use the following code:
div:not(.dark-mode) .main-inner{ background: rgba(252, 252, 252, 0) !important; }
this code will make fully transparent of that section only when it is not on dark-mode.
But as I described you need to understand how dark mode changes your website structure. Maybe, it is not adding new classes but changing the all CSS file. Then you just need to edit that specific files.
You can use
.col-2cl .main-inner {
display: none; // In case it will not work, you can try to add !important before the semicolon.
}
or change the background property with
.col-2cl .main-inner {
background: url(new_background_image.jpg) repeat-y right 0 !important;
}
I have a Wordpress page, which I've set up for a friend. It all worked well, but since a few days or weeks the mobile menu (icon) doesn't show anymore. Can anyone find out what this could be?
The page: http://www.cabane-blanche.ch/
put this code in your theme style.css
nav {
font-size: 20px; }
A CSS rule in your themify-customizer.css file is causing the font size to be 0px for everything inside header.
#header { font-size:0px;
}
at line 59. You must remove this rule and it will fix this problem. It is also causing the dropdown item at "WARENKORB" tab to not show up.
If you only want to fix the mobile menu leaving the header rule intact, you can add following code to your style.css, Although I recommend the fix mentioned above instead.
.icon-menu {
font-size: 30px;
}
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?