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 6 years ago.
Improve this question
Im looking to have images centred in a row on http://justinstephens.co under the 'contact us' section.
Probably a simple resolution but I can't seem to get it right.
Update
The solution below was done in Chrome with live editing. After further investigation, it appears your CSS file adds a margin to #contact-images. Removing this margin will allow the solution below to work.
#contact-images {
/*margin-left: 190px;*/
text-align: center;
}
This will center the <ul> under Contact us:
<div id="contact-images" style="text-align: center;">
There remains a slight misalignment. Remove the padding to the <ul> element to fix this.
<ul style="padding: 0 0 0 0;">
Add text-align:center to the element with the id contact-images. The following is only for demonstration purpose:
<div id="contact-images" style="text-align: center;"> [...] </div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Can anyone explain the following CSS code?
.main aside {
background: linear-gradient(white, pink);
}
where main is a CSS class.
That rule applies to each aside tag (not class) which is inside an element that has class main
example:
<body>
<div class="main">
<div>
<aside>
... (rule applies here)
</aside>
</div>
</div>
</body>
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 7 years ago.
Improve this question
I've been trying to find a good, simple solution for this for days now, and I'm coming up empty handed.
I'm trying to make a blog in wordpress, that currently has excerpt with images on the front page. The images are not featured images and they link to the full post. What I really want is for "read more" to appear when i hover over the post image on the front page.
Ideally, I would love to implement one of these codrops hover effects (http://tympanus.net/Development/HoverEffectIdeas/) on the post images if it's possible. I'm very much a newbie to wordpress, so I don't know where to put what code.
But any help would be greatly appreciated.
Try below core code of HTML and CSS:
<style type="text/css">
div.texthover
{
display:block;
position:relative;
width:150px;
}
div.texthover .overlay
{
position:absolute;
top:45%;
width:100;
width:150px;
background-color:rgba(0, 0, 0, 0.3);
display:none;width:150px;
}
div.texthover:hover .overlay
{
display:block;
}
</style>
<div class="texthover"><br />
<img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
<span>This is some text I want to display</span>
</div>
</div>
In WordPress, go to Appearance -> Editor and edit style.css or your main .css theme file. You can put there your hover code. You also need to add the corresponding classes to your image. However if you want "read more" to appear you would need the existing associated HTML code. On another hand, you got some hover plugins available, I found this one with a quick search : https://wordpress.org/plugins/amazing-hover-effects/
Good luck.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is the safest/no height change cross-browser way to add a space between paragraphs when using css reset?
<div>
<p class="text">paragraph1</p>
<p> </p>
<p class="text">paragraph2</p>
</div>
<div>
<p class="text">paragraph1</p>
<br>
<br>
<p class="text">paragraph2</p>
</div>
http://jsfiddle.net/unknown601/0ewvk3c9/
I find it useful to include space between adjacent paragraphs.
Example: http://jsfiddle.net/kppb0nLx/3/
/* a paragraph proceeded by another paragraph will have a top margin */
p + p {
margin-top: 8px;
}
This allows you to keep paragraphs flush with the top/bottom of your container while still having space between them.
The options you listed (br and p purely for spacing) are not considered good practice. They don't represent the your content semantically and they create extra markup that can easily be replaced with CSS.
More Reading
The <br> tag should only be used to break line i.e <p>This is first line <br> This is second line.</p>
For spacing i would have to say on based on my personal experience & on observation of most of the frameworks margin is the best practice to create spacing between paragraph.
DEMO
CSS:
p{
margin: 0 0 10px;
}
Edit: I like #Tim Medora solution much better: p + p { margin-top: 8px; } by adding top margin to adjacent p tags we eliminate the first and last p tag margin issues commonly faced.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Am currently designing a website using bootstrap and so far I have come up with a very nice website that is supposed to respond but it doesn't when scaled down. I want the website to respond to the following screen sizes: 768x1024, 800x1280, 980x1280,1280x600 and yet I've read bootstraps docs of responsivenness and tried them but nothing has changed.
I created my own classes inside a getbootsrap template and even when I tried to put them inside;
<div class="col-md-4"><div class="andy-redbackground"</div>
</div>
even tried to get into the classes and insert:
background-size:cover;
but nothing worked out.
Try this code:-
<div class="row">
<div class="col-xs-4">
<div class="andy-redbackground"></div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'd like to style a text box within a div that has a specified class:
<style>
.myStyle input[type="text"] {
width: 250px;
}
</style>
<div class="myStyle">
<input type="text">
</div>
This code doesn't work, is there a way to do this? (other than assigning a class to the text box itself).
There's nothing wrong with your CSS, just add </input> before the </div> and you'll be good to go.
Fiddle: http://jsfiddle.net/6zmNM/ (With JS to provide an alert for the width of the text box)