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 5 years ago.
Improve this question
I am trying to fix the following issue on this website: http://santanna.beutifi-website.com/
Notice that there is a blank space to the right as if the page has a wider width or margin, although after checking these features, I could not figure out what the problem is. It does not happen on mobile devices though.
I played with developer tools for quite a while and no luck, I was wondering if any of you might be able to see whats wrong...
Cheers!
I started writing what #Matthew said but since you're using WordPress it's probably better to just overwrite the style. Try this:
.copyright{
margin-left: 0 !important;
}
.copyright p{
text-align:center !important;
}
Add that to custom styles of the theme if possible. Good luck!
The issue only shows when you make the screen size smaller. It is being caused by your css below:
#media only screen and (min-width: 840px) (index):175
.copyright {
margin-left: 25%; */
}
When I remove that it solved the problem.
If you want your text to be centered you can either remove the text-left class you have on that div and center it manually or you can add text-align: center !important to your copyright class after you remove the margin.
Edit:
Also you should not double up on the .container classes like you have below. Either use one or the other.
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-12 col-sm-12 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one light-gray-text2">
<p align="left" style="font-size:11px;text-transform:uppercase;color:#939598;width: 100% !important;">Copyright © 2017. Built & managed by <span style="color:#56c7cc;">BEUTiFi.com</span> All rights reserved.</p>
</div>
<!-- end copyright -->
</div>
</div>
</div>
It's a problem with the css in the .
the .container class item is set to a pixel width;
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
image
this is my first post here and I'm trying to figure out how I can do something like that
thanks in advance
I would use flexbox in CSS. once you lean this it will be a tool you use a lot for this type of thing. when you use flexbox there is a container element. i would use a div. see my example.
<!--HTML-->
<html>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
the divs that are "class" of "box" are the no1 and no2 paragraphs. in CSS use:
/*CSS*/
#container {
display: flex;
flex-direction: row;
}
you'll just need to format the class of box which will format each of the elements in that class (4 in my example above)
use this cheat sheet and you'll be a pro at this in no time.
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
also, view the page source you want to copy, it will all be there for you to see.
good luck
In addition to what sao said, a more basic way would be using display's inline or inline-block properties:
.box {
display: inline-block;
}
<div>
<div class="box">X</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
It should do the trick, but I agree that using flex is a better and more advanced way to do so.
Also, I'd recommend searching a bit more for your question before asking it, I'm sure this question has been asked before.
Best of luck mate!
you've got many options depending on wether or not you intend for it to be only text, images .. and how adaptable you want it to be in the future.
here is a simple way that doesn't require advanced CSS:
.container { /*attributes of "div" weating the "container" class*/
display: flex;
width: 500px; /*make it 500pixels wide*/
}
.box {
width: 50%; /*all "box" will have a width of 50% it's parent (container here)*/
padding: 10px; /*give some cushion on the sides*/
}
.box:first-child { /*select only the first "box", very powerful*/
border-right: 1px solid red; /*right border to delimit*/
}
<div class="container"> <!--wide container in which both boxes go in-->
<div class="box"><!--1st box-->
<p>Your first text goes here and it goes on and on and on and on and on and forever....</p><!--1st text-->
</div><!--close 1st box-->
<div class="box"><!--2nd blox-->
<p>Your second text goes here and it goes on and on and on and on and on and forever....</p><!--2nd text-->
</div><!--close 2nd box-->
</div><!--close wide container box-->
The possibilities from here are endless. Visit a trusted site on HTML/CSS/JS coding to get started. I'm personally keen on Mozilla
Your most useful tool will be the "inspector", on any modern browser today you have the possibility to change CSS code and play around, discover what works and what doesn't. It doesn't affect anyone but you, on the page you're visiting, for example :
I used Flex in the example, but it's only one of the many options. With CSS there are often more than 2 ways to produce 1 result. Always go for the one with less code and less specific (more open ended to future changes)
Now hope your curiosity is tickled, get out there, learn & code !
I'm trying to figure out how I can do something like that
You have multiple options. From approximate worst to approximate best:
HTML tables (https://www.w3schools.com/html/html_tables.asp)
CSS absolute positioning (https://css3-tutorial.net/positioning/absolute/)
CSS tables (https://colintoh.com/blog/display-table-anti-hero)
CSS floats (https://www.w3schools.com/css/css_float.asp)
CSS Columns (https://www.w3schools.com/css/css3_multiple_columns.asp)
CSS Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
I'm very new to css and html, and realize this might be a silly mistake...
Code Pen Demo
I don't see a top margin anywhere (using different bootstrap sources and building from them) but no matter how much I dissect the code, I still can't find the problem.
<div id="fh5co-products" data-section="products">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 fh5co-section-heading text-center">
<h2 class="fh5co-lead animate-single product-animate-1">innovating you</h2>
<p class="fh5co-sub animate-single product-animate-2">Your buyers are constantly evolving, and it can be hard to keep up. That's where we come in. </br>By uncovering the latest trends and best-in-class technologies, we work to ensure that you provide a selling experience that exceeds your buyers' expectations.</p>
Please add this css in your code
.jumbotron {
margin-bottom: 0;
}
Because the first element with a child div class="jumbotron" has a property margin-bottom with a value of 30px
in your CSS
.jumbotron {
margin-bottom: 0; // or use margin-bottom: 0 !important if this not work
}
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 6 years ago.
Improve this question
Please checkout the following fiddle
HTML structure and Css is almost same. that i am using in my project.
Currently i have 3 sections in my design
HEADER
Portfolio
Slider Troubling section
I am using bootstrap 3 latest version.
I have given position relative to Portfolio section and its inner block to position absolute with top: -50px;
Every thing is fine here. but problem comes when i add new section "Slider". It is coming over the Portfolio section. I have tried giving it position and different block properties. but still slider section is coming over the portfolio section. When i remove Positions from Portfolio section
the Slider section goes back to it normal position which is what i want.
Can anyone please check the following fiddle and tell me what i am doing wrong.
Design is like that Portfolio section is little bit over the header. that's why i am using position.
<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script>
https://jsfiddle.net/DTcHh/29616/
I'd rather not use position: absolute where it's not needed because it breaks the flow. You need only position relative or negative margin-top to move the element up. See example https://jsfiddle.net/DTcHh/29623/
<header class="container-fluid header">
<div class="row">
<h1>HEADER</h1>
</div>
</header>
<section class="container">
<div class="row position-relative">
<div class="col-sm-10 col-sm-offset-1 position-relative-col">
<div class="height">
<h2>Some Portfolio items here</h2>
</div>
</div>
</div>
</section>
<section class="container trouble">
<div class="row">
<h3>Slider Troubling section</h3>
</div>
</section>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.header {
background: lightblue;
padding:25px;
}
.position-relative {
position:relative;
}
.position-relative-col {
background: green;
position: relative;
top: -50px;
}
.trouble {
background: darkblue;
opacity: 0.8;
color: white;
}
.height {
height: 100px;
}
try add to the container class height property. It should work:
.container{
height: 100px;
}
Check my update I hope it helps.
http://jsfiddle.net/DTcHh/29626/
what I did are put the slider and portfolio into the same tag that using position:relative and top: -50px;
You are using the bootstrap 3 grid wrong. For each row you have to add a row class and for each item in the row class you have to use the class col-*-*. I have written based on your code some new code with the proper use of bootstrap grid.
http://jsfiddle.net/DTcHh/29627/
Please let me know if this is not good, and what you try to achieve instead.
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to do fixed width right column column in bootstrap, but left column will be responsive.
I use bootstrap 2.3.2
(source: toile-libre.org)
Right column will not be resized at all screen size.
My basic solution below (see it in action here). I've padded out the CSS to demonstrate the blocks with colours, but all you really need to do is as follows:
Fixed element
Set it to float:right
Apply a fixed width to it
Fluid row element
Apply padding/margin-right equal to the width of the fixed element
Apply box-sizing:border-box, so that the 100% width against the .row-fluid element persists, but the margin/padding added doesn't push it out further. The markup below shows the minimum you'll need.
CSS
#fixed-width {
width:100px;
float:right;
}
#fluid.row-fluid {
margin-right:100px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
HTML
<div class="clearfix">
<div id="fixed-width">Content...</div>
<div id="fluid" class="row-fluid">
<div class="span4">a</div>
<div class="span4">b</div>
<div class="span4">c</div>
</div>
</div>
this kind of design it's not provided by bootstrap, but there are simple solutions.
Here is one, see the accepted answer to this previous SO question Bootstrap: Fixed gutter width in fluid layout?
and in particular, this css tricks
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
as shown in this fiddle http://jsfiddle.net/6vPqA/808/