I am trying to design a WordPress theme using Bulma.io; I'd like a page with tabs and content inside a container div element. When I apply Bulma CSS class is-marginless, three margins get overwritten, but margin-right is not applied from the class. Adding style="margin-right: 0px !important;", does not affect the visuals either.
To switch between tabs, I use code from The Internet which works seamlessly except the margin-right issue.
Considering the design is relatively complex already, you can see the page for yourself.
As you can see, due to the div element right margin, the border does not meet with the border of the tab lines. I am quite new to Bulma and CSS in general.
When I open Chrome Developer Tools and find a definition of is-marginless for a given div, I can see margin: 0px !important; is set, but when I click the expand arrow, I can see margin-right: 0px !important; crossed out, so it does not apply for some reason, but I can't find out why.
I've added is-fullhd to the class and it fixed the issue, the blocking piece of code has been max-width: 1152px; on container class, added class increased it to max-width: 1344px;
Related
I am attempting to style the horizontal rule elements on my site (or separators, as Wordpress likes to call them). I have added the CSS to my style sheet, but for some reason, the styling is not applying to all instances of horizontal rule.
I am very new to web development and this is my first time amending style.css. I feel I may be missing something obvious.
I have added the following to the top of style.css:
hr {
background-color:#06185F !important;
height:0.5px !important;
}
I expected that styling to apply across all horizontal rule elements on my site. However, it appears to be applying inconsistently, as seen here: https://emotionallyhealthyschools.org/whole-school-approach/
The middle of the three separators I have used in the body of this page is showing with a different style to the other 2. Please advise?
The css seems to be fine - However, it's actually the middle hr that is displayed correctly with a height of 0.5px.
I would actuall refrain from dimensioning below 1px because of potential unintended renderings due to rounding errors. If you add
min-height: 1px;
the hrs are rendered with the same height.
add the CSS in bottom of the style.css
bootstrap is adding some styling, including a border-top value to your hr.
add border-top: none or border-top: unset and it should work as expected.
Also change your px-value to a full px.
with pixels you either have one or not, there aren't half-values.
I am trying to use vuetify menu in a sidebar navigation. I would like for the menu to align perfectly to the left side of the screen. Instead what I am getting is the menu is insisting to be positioned 12px away from the edge of my screen and wrecking my alignment.
Is there a way to disable the shadow or to force the alignment? The left: 12px is specified directly on the element's style so CSS has no effect.
I have tried this but no luck:
<v-menu offset-y nudge-left="-12" flat>
https://codepen.io/RuttyJ/pen/BevNmy?editors=1010
Any ideas?
Update:
Made some progress:
https://codepen.io/anon/pen/WBLMob
This achieves the effect but requires the override of the menu nudge on a global level to 0px !important.
You can use content-class like:
<v-menu content-class="elevation-0">
You can use the elevation directive to remove the shadow.
Just add elevation="0" to your element.
https://vuetifyjs.com/en/styles/elevation
To remove the shadow, you could simply override the styles for .v-menu__content. In some CSS:
.v-menu__content {
box-shadow: none;
}
Aligning to the left can be done setting the styles via javascript.
Having said that, I think it is easier to make a sidebar menu from scratch than trying to transform a component which is not meant to be a sidebar into one. Transitions will be off, and so much on.
I just had a similar issue but with a menu activator less than 12px from the top of the page.
Looking at the source for the VMenu component (via the menuable mixin) you can see that 12px is a hard coded minimum distance. The only way I can see to get around this is to !important override the css only for these specific cases.
Left calculation: left = Math.max(left, 12);
Top calculation: return top < 12 ? 12 : top;
I have created a Vuetify Issue to cover the top case.
This worked for me with a v-navigation-drawer component Vuetify 2.0
<v-menu class="elevation-0" >
You can use $menu-content-elevation: 0;.
SASS variables
Available menu component SASS variables
I have trouble centering and modifying the height of a contact form inserted in a text widget positionned in the left footer of my website.
http://www.durocketdescarottes.fr/
I'd like to reduce the height of my form and center it horizontally.
I have tried this CSS snippet :
/* Contact form customization */
.wpcf7{
height: 20%;
max-width: 50%;
margin: auto;
}
Changing the max-width property does change the width of the form, but I am unable to center it in the widget area using the usual "margin: auto;" trick.
Changing the height property does not do anything.
EDIT: following D_S_B suggestion, I tried to style the div.wpcf7, but my changes don't appear in the CSS style of my page. What is going on ?
Thank you very much for your help,
Benjamin
Taking a quick look at your css, it looks like there are styles applied to div.wpcf7, as well as the styles you posted from .wpcf7.
The classes applied do the div.wpcf7 are more specific than the ones without the div selector, so any margin you apply to your class will be overwritten by the margin: 0 applied to the div.wpcf7.
If you scope your class to div.wpcf7 and add a margin: 0 auto there instead, that will cascade as expected and horizontally center your form for you.
I solved my problem by downloading the Contact Form 7 style plugin. It wraps the form with additionnal classes which makes customization easy.
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.