What would be the best way to achieve this?
]]>Thanks in advance.
]]>I’m trying to find something like display:inline-block but can’t seem to find it possible in the crayon settings or where else I might put it.
I have something similar working in a different area not using crayon for a simple text box:
.background-notes {
padding: 2px 6px 4px 6px;
color: 222;
background-color: rgba(254,166,64,0.2);
border: #e3e3e3 2px solid;
display: inline-block;
}
how to do this with crayon?
]]>my question is pretty straightforward, how can you reduce some white space between elements in an inline block. I have a menu where the space between is just too big.
I tried using margins and padding but it looks very clunky.
preview: https://plnkr.co/edit/txRQ0X9wTKhCPFIcbv3R?p=preview
Cheers
]]>https://grafikdesigngroup.com/our-etsy-shop
/*———————————————————————————–*/
/* ETSY SHOP
/*———————————————————————————–*/
.etsy-shop-listing-table {
border: 0px !important;
}
td.etsy-shop-listing {
border: 0px !important;
}
.etsy-shop-listing-card {
background-color: white;
border: 1px solid #EAEAEA;
display: inline-block;
width: auto; /* MY-EDIT – Was 172px */
min-width: 200px; /* MY-EDIT – Added this. */
min-height: 200px; /* MY-EDIT – Added this. */
text-align: center;
padding: 12px; /* MY-EDIT – Was 6px */
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
margin-top: 12px;
margin-right: 7px;
margin-bottom: 10px;
margin-left: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-card {
background-color: white;
border: 1px solid #EAEAEA;
display: inline-block;
width: auto; /* MY-EDIT – Was 172px */
min-width: 200px; /* MY-EDIT – Added this. */
min-height: 200px; /* MY-EDIT – Added this. */
text-align: center;
padding: 12px; /* MY-EDIT – Was 6px */
/* font-family: Arial,Helvetica,sans-serif; */
font-size: 12px;
margin-top: 12px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); /* MY-EDIT – Added this to make items match Woocommerce listings. */
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
}
.etsy-shop-listing {
border-top: 0;
}
@media all and (max-width: 768px){ /* MY-EDIT – This property didn’t exist before. It puts LESS space between the page title and the first page content on a smart phone. */
.etsy-shop-listing {
width: 100%;
}
}
.etsy-shop-listing-thumb {
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
size: 100%;
/* height: 100%; /* MY-EDIT – Added this. */
/* width: 100%; /* MY-EDIT – Added this. */
}
.etsy-shop-listing-thumb img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
padding: 0px;
img-size: 100%;
/* height: 100%; /* MY-EDIT – Added this. */
/* width: 100%; /* MY-EDIT – Added this. */
border: 1px solid #EAEAEA;
}
.etsy-shop-listing-detail {
margin: 0;
padding: 0;
text-align: left;
}
.etsy-shop-listing-title {
height: 17px;
line-height: 17px !important; /* MY-EDIT – Was 15. */
padding: 0;
margin-top: 5px;
overflow: hidden;
}
.etsy-shop-listing-title a {
color: #666;
text-decoration: none;
border-bottom: none;
}
.etsy-shop-listing-title a:hover{
text-decoration: underline;
}
.etsy-shop-listing-maker {
line-height: 16px !important; /* MY-EDIT – Was 14. */
margin: 0;
padding: 0;
}
@media all and (max-width: 768px){
.etsy-shop-listing-maker {
font-size: 19px;
}
}
.etsy-shop-listing-card a {
text-decoration: none;
border-bottom: none;
}
.etsy-shop-listing-maker a {
color: #B2B2B2;
text-decoration: none;
border-bottom: none;
padding: 0;
margin: 0;
margin-right: 6px; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 14px; /* MY-EDIT – Added this. Affects price. */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-maker a {
/* margin-right: 3px; */
line-height: 14px;
}
}
.etsy-shop-listing-maker a:hover{
text-decoration: underline;
}
.etsy-shop-listing-price {
color: #5DA823: /* Green #5DA823; */
float: left; /* MY-EDIT – Added this to create space between Available and price. */
line-height: 15px !important; /* MY-EDIT – Was 14. */
margin-top: -14px;
margin-right: 10px; /* MY-EDIT – Added this to create space between Available and price. */
}
/* iPhone 6 in portrait & landscape */
@media all and (max-width: 767px){
.etsy-shop-listing-price {
margin-right: 8px;
}
}
.etsy-shop-currency-code {
font-size: 14px; /* MY-EDIT – Was 10px */
}
<div class="wc-comment-footer">
<div class="wc-vote-result">...</div>
<span class="wc-vote-link wc-up ...">...</span> | <span class="wc-vote-link wc-down ...">...</span> <span class="wc-reply-link" title="Reply">Reply</span> - <span class="wc-share-link" title="Share">Share</span> <span class="share_buttons_box"></span><span class="wc_editable_comment">- Edit</span><span class="wc_cancel_edit">- Cancel</span><span class="wc_save_edited_comment"> - Save</span><span class="wc-toggle">Hide Replies ∧</span>
</div>I first notice that there are an awful lot of s. While this works for text-based inline layouts, this makes it very hard to tweak the spacing. There are plenty of better ways to achieve this with CSS (e.g. using display: inline-block and adding margin).
There is also no easy way to use CSS to remove the pipe (“|”) between the voting buttons and dashes (“-“) between the Reply, Share, and Edit links, as they do not come with their own wrapper. A much better approach could be a vertical border using CSS.
The Unicode symbols used for the Show/Hide Replies toggle (∧∨) are quite tall and angular for my taste, and there’s no way to change that either. Since you’re already using Font Awesome, why not make use of their arrow icons?
I’ve seen this plugin shoot up in popularity recently, and I encourage the team behind this fantastic plugin to adopt simpler, more flexible markup so that developers can more easily integrate it into their themes. Any confirmation of future changes would be greatly appreciated.
https://www.ads-software.com/plugins/wpdiscuz/
]]><div class="mainpage">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-------------------------------------------------------------
</article><!-- #post -->
</div>and used this css.
.mainpage {
width: 33%;
display: inline-block;
vertical-align: top;
}Works fine, posts grid out on the main page except for one thing. No matter what I try every post displayed in a row takes on the height of the tallest one. I can get the post to align at the top or bottom but I can’t get them to stack tight against each other vertically.
Researched it with little result. Does anyone out there have any ideals? I know I’ve seen it done before. In fact the “visual” theme does but I can’t figure out how.
]]><!DOCTYPE html>
<html>
<head>
<style>
p {
width: 25%;
margin:0!important;
}
</style>
</head>
<body>
<p display:block;>This is a paragraph.</p><p display:block;>This is a paragraph.</p>
<p display:block;>This is a paragraph.</p>
<p display:block;>This is a paragraph.</p>
<p display:block;>This is a paragraph.</p>
</body>
</html>I want to achieve a layout for the recent posts on the frontpage like this, but currently my website looks like this (please ignore the silly photos) . Does anybody know what I can do to get these post divs to align like I want it?
Thanks in advance! Let me know if you need code snippets or something similar in order to make sense of this.
]]>