I just noticed that on the Wordpress theme I created the H1 article titles are floating up into the subsequent article when you start to shrink the browser window. I can't seem to find the reason for this. Any insights would be greatly appreciated.
ul.info li, .excerpt, .post-link {
float: left;
}
The styles above seem to be pushing the title of the article up but if I remove it then "posted by, written on, date" all turn into a horizontal list. Which I don't want.
I don't know if they're related by I noticed when I look at single post pages if I shrink the browser window the content of the article flows off the screen.
Thanks in advance for you help everyone. Really confused.
You can see the problem here: http://www.blog.theplaybook.co
Assuming you are putting all your articles within a div tag or a section( if in HTML5)
You should use the following CSS for all the article div tags
clear : both
This should solve it.
Related
Our whole site (running bootstrap v3) has an issue with link tags where when clicked, it sometimes doesn't visit the page on that first click and instead it shifts slightly down and to the left, pushing other elements with it.
Example:
Before click on tag
After click on tag
I've tried using Display: block; and Display: inline-block; but that hasn't helped. There is no issue if I were to replace these as tags (nothing shifts around), but I shouldn't have to use tags.
I've never encountered this issue before so if anyone has dealt with this or might know what could be causing it, any help would be much appreciated!
Thanks in advance
Try display:block on a:active. define definite height and width to links. It is hard to determine the issue since you haven't posted any code, but I am sure this will fix it.
I'm working on a project using the Vue.js 2.0 framework and a bit of Bootstrap 3. This project has required me to work more on the front-end than I am normally used to so I was wondering if anyone here could give me some useful insight into a few CSS issues I appear to be having.
The Project can be found here: http://rgmotorhomehire.com/project
If you give the source a quick inspection, you will probably notice that the body element is only the height of the navbar, and that the container div's for my various 'Pages' are actually totally outside of the parent body element.
The main thing I'd like to know is:
How I can force the Body to 100% height via CSS, so that it wraps it's child elements properly, and I can then add a Footer to the HTML.
Please note that I have already tried:
html,
body {
margin: 0;
height: 100%;
}
However, if you try this for yourself in the inspector, you will notice this then introduces a new issue of the HTML element now having an empty space below it.
This whole scenario has left me more than a little lost and confused. Hoping someone out there can inform me on whats causing my issues.
Note: I'd like to apologise in advance for any pointless info this post contains (including this note), I've had complaints in the past about my questions not being direct enough but I've tried my best to be as clear and concise as possible, Thank you.
UPDATE: Literally straight after this post, I discovered the solution is to use clearfix on my wrapper divs as they had a 0 height bug. This post can probably be closed now. I found this solution here: http://www.jqui.net/tips-tricks/css-clearfix/
clearfix is a bootstrap class. It clear out all float property. that is right or left.
If you have a div of calling float left property.
for the class pull-right have the property float right. So for the next div we want to clear all the floating property that called before, so we call clearfix it clear all the floating property. so that it works fine.
I'm following the Udemy complete web development course. I'm supposed to be making a clone of the BBC website but I'm having a couple of issues. First of all my font is much bigger than this, set to the same 0.75em. Also my h1 tag seems to be to the right of the tag so I am guessing I've messed up with the flow somewhere but can't see how.
http://jsbin.com/yowoyohaja/1/edit?html,output
From what I can gather, you would like the header to be above the date?
If that's the case then simply move the H1 tag to above the date in the HTML and ensure all your open tags are closed, as your H1 tag was left open. See updated jsbin:
http://jsbin.com/cetokibuva/1/edit
I'm making a website for an organization at my school, using basic HTML and CSS. Right now, I've made several other pages for the site and have run into no problems like this one.
Here is the page I am having trouble with, if you want to view it in context:
http://acacians.net/scratch/officers-slim.html
I tried posting the code here, but it didn't completely work. I suggest following the link and viewing the source.
The final "officer" div is for some reason falling outside of my "info" div, which is nested in the "pagecontent" overall div.
Here is a link to the original CSS:
http://acacians.net/scratch/style.css
I'm really not sure what other information to supply, so I'll do my best to watch for any questions and do my best to respond accurately to them.
Thank you,
-Mike
Put <br style="clear: both;"> just before closing .info div.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.