i am dealing with a situation which i believe has to do with bootstrap classes.
I have a section in my Magento 2 website which goes as follow:
enter image description here
That blank space behind "Document/Trace 1" has to go. The thing is i have tried different strategies but none of them seems to work.
The code goes as follow:
enter image description here
As you can see, the layout of the template is edited in the Magento Admin, but i believe if i edit the bootstrap classes i might be able to solve the problem. I guess maybe the classes are trying to cover the space on the container?
Every help is welcomed. Thank you very much.
Have you tried with minimum height like below ?
.panel-body{
.form-group{
min-height:100px;
height100%;
}
}
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I have a one page layout template and I'm having issues with only one div in particular on a split section. For some reason all my divs are responsive regardless of content except for one. It contains my profile picture underneath the hello section of my website http://dtcm.co.nz.
Can anyone suggest possible solutions or help me with this one, I have tried to include max-height:px height:% min-height:px into the css of the #media inquiries of each layout but nothing seems to be working..... maybe I've missed something really simple........
I have a problem with unwanted free space on right side of my webpage.
I am using Bootstrap version 3.3.4. The problem disappeared when I used the following CSS for the body tag:
body{width: auto !important;overflow-x: hidden !important;}
But for mobile devices the problem still exists. I do not know what is causing it and I would like to get response from you.
Here is the complete example website: http://www.filedropper.com/zapytanienastackoverflow_1
Here is a screenshot with the white space. It appears when you scroll the webpage to the right.
I can't post comment because of a reputation (I really understand these limitations, I didn't find single one which would actually help and not the other way around), so I have to post it as an answer.
The link you provided doesn't work so I can't be sure. But to me it looks like it could be a problem of the size of the picture in addition to the bootstrap gutter? What dimensions did you use with the picture?
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
I am in the process of using Foundation to create a website, and I have come across a problem that I can't seem to find the solution too. I have noticed that when expanded, some of my drop-downs get cut off in the Mobile Version of the Top Bar, and I was wondering if anyone had come across this issue, or had a fix for it. Did I do something in the CSS that made the JS no longer count all of the elements correctly?
You can see what I am saying here.
http://www2.100foldstudio.org
Just try this by adding in css.
.jScrollPaneDrag {
height:0px!important;
}
I think the link is break in theme
Update the link from
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/_/js/functions.js
to
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/js/functions.js
Figured out that if I add a List Item at the end of the main top bar section in "mobile" mode, and added a clearfix class to it, the js kicked in and started calculating the height correctly.
Thanks guys,