This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
Related
please help me! i have spend 2 days to understand this condition :(
i found a website: http://www.wpbeginner.com, which have amazing widget icons in the sidebar lead to different pages.
then i tried to make something similar to it. i get their widget code.
<div class="guideicons">
Starting a<br>Blog
WordPress<br>Performance
WordPress<br>Security
WordPress<br>SEO
WordPress<br>Errors
Building an<br>Online Store
</div>
now i want to understand 2 things
firstly as you can see he added this tag at the beginning then
" class="guideicon starting". guideicon +icon name = icon and it's name which appears in the web page what he did to make it occur?
secondly the arrangement 2 columns each one have 3 icons how he did it it html5 through this simple code?
thank you so much
He has the width set to 47% in the class .sidebar a.guideicon. Because the width is set as 47% the width of the container, you cannot fit more than 2 icons across, so it overflows into the next row.
Open the developer tools and play around with the width. If you set the width to something like 10%, it will all fit in the same row.
Well if you inspect this sidebar you can see which class does what. In your case he uses the class guideicon to implement same style accros all the a tags in this sidebar with the rule .sidebar a.guideicon. And after that he uses the second class e.g speed to ad an icon whith the :before pseudo selector to add an icon from their icon pool with this 2 rules: content: "\f00b"; & font-family: Wpbeginner;. This is how Font Awesome was working(I am not sure if it still works like this nowadays).
If you want add you own icons like this you should just need to do something like this:
https://codepen.io/anon/pen/ZRJPEv
I hope i helped
I am having some problems with Bootstrap 3
In my header I currently have 2 columns, both with a columns width of 6. I would like to add a column in between these two columns.
But if i change the column to 4 and add a 4 column in between they appear on different lines. Is the following not the correct way to have 3 columns in a row in bootstrap 3?
<div class="row">
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
</div>
Thee is a link to site where i am having the problems. The problem is in my header where my logo is
http://www.sevecu.dk/juni14/
Update: It works in Chrome and Safari but not in Firefox and Explorer
I was able to reproduce this opening it in IE. Your three columns are setup correctly.
What you'll notice is even if you delete the logo nodes through the debugger, the one of the three is always in the top-right corner. This led me to believe the alignment of something above it is uneven.
Specifically, it appears to be caused by the following in template.css:
p {
margin: 0 0 10px;
}
Which is pushing the .customphone below the area defined in the white-row.
To resolve it, one way would be to do:
p {
margin: 0;
}
Or probably change it to .customphone p or create its own class so you don't affect all p
This resolved the issue for me.
So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }
I have a problem,no matter what browser I use(after tests,I found this problem only exists in IE6, and I guess it may be related to the iframe), a black vertical bar always show up when I open the page at first time,but the problem just occur on some PCs and notebooks,and when I move the browser, the black bar changes or disappears at the meantime.I snaped two screenshots:
http://vilence.host152.ftp18.cn/pics/p1.jpg http://vilence.host152.ftp18.cn/pics/p1.jpg
http://vilence.host152.ftp18.cn/pics/p2.jpg http://vilence.host152.ftp18.cn/pics/p2.jpg
Check for the hardware problem first and then check for the borders and border colors sometimes we fail to manage the div and their alignments specially with complex structure of the position:abosule or relative or fixed, I frames does i have some kind of things. But divs does lots of same type mistakes..
do to give wrapper for every div like
<div id="content-wrapper" class="outer-cls wrapper">
<div id="content" class="inner-cls inner">CONTENT HERE</div>
</div>
this technique make debugging and themeing easy . I was having same type of problem lot of time. ;)