I'm using WP RSS Aggregator, and I've styled the feed into containers, along with creating a 3 column layout. Limiting the feeds to 18 per page, I'm experiencing overflow issues. Setting the CSS to overflow:hidden !important; has not resolved the issue. Being the length of each feed item varies, I'm hoping for a solution that will carry through each feed category. Below is a link to the feed page, followed by the CSS I've implemented for feed imports into their respective pages. Thank you in advance for your help.
enter image description here
div.wprss-et-social-buttons {
display: none;
}
.thumbnail-excerpt img{
float: none !important;
}
.thumbnail-excerpt {
text-align: center;
}
li.feed-item{
overflow: hidden !important;
border: solid #000 2px;
border-radius: 5px;
padding: 10px;
width: 250px;
background: #eee;
}
.thumbnail-excerpt {
overflow: auto !important;
}
wprss-feed-excerpt{
font-size: 16px;
text-align: center;
}
li.feed-item > a{
font-size: 23px;
text-align: center;
}
ul.rss-aggregator{
column-count: 3 !important;
list-style-type: none;
}
#media only screen and (max-width: 980px) {
ul.rss-aggregator {
column-count: 2 !important;
}
}
#media only screen and (max-width: 479px) {
ul.rss-aggregator {
column-count: 1 !important;
}
}
Related
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#media only screen and (min-width: 992px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 107px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#media only screen and (max-width: 991px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 99px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
}
I tried that but it did not work
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
width: 208.5px;
position: fixed;
top: 0;
}
I tried that but it did not work
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
margin-top: 20px;
}
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this from the css as it needs to stay original. I also don't want to copy the whole bunch of classes and write "none" or "unset" behind every single attribute. Is there any solution for this. Thanks a lot.
/*original.css*/
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
}
/*custom.css*/
/*here should be nothing like it wouldn´t even exist in the original*/
You can write as many classes in the media query within the parenthesis.
Here is an example for this
Just define the class above and change as per your requirement as per screen size.
.custom_class1 {
height : 1px;
}
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
.custom_class1 {
height:70px;
}
.custom_class2 {
height:70px;
}
}
I've got an online submit to email form, but some people may want to just print the page. I used the #media print query with CSS and when I tried to print the page my printer printed a couple lines and then stopped. It said "unable to send data to printer". Should I try something else entirely or is there a way to make this work? There is JavaScript validation but the page prints okay if I don't try to adjust the styles, so I don't think that's a factor. Without any adjustments it takes two pages to print and doesn't look fantastic.
This is my CSS:
#media print {
.online {
display: none;
}
.print {
display: block;
}
.container {
min-height: 0px;
}
.content {
min-height: 0px;
border: none;
margin-bottom: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}
nav {
display: none;
}
.dance h3 {
color: black;
font-size: 18px;
}
.contact {
padding: 20px 0 10px;
border-top: 1px solid black;
border-bottom: none;
margin-bottom: 0px;
}
.item-bid {
margin-bottom: 30px;
}
fieldset {
font-size: 12px;
border: 1px solid black;
}
label {
font-size: 12px;
}
input, textarea {
display: none;
}
form p {
font-size: 12px;
}
.description {
padding-bottom: 100px;
}
}
If you're using Chrome you might want to output a PDF via the printing dialog box, and see if there any noticeable errors.
I'm not really good with css, somehow I managed to modify my navbar to make the collapsible button appear no matter how small or big the screen size is by adding this on my Site.css:
#media (max-width: 4000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-form {
width: 100%;
}
}
Now my navbar behaves the way I want it to except for 1 thing:
When I click the collapsible button, the drop down menu background takes all the space of the screen. What I want is when user is on desktop, the collapsible menu takes a specific width only. What should I change in my css file? This is my desired output (when using desktop ONLY):
Hi for some reason my responsive CSS is not working, I'm not sure what to change or what to do, but whenever I load my site up on my iPhone and zoom all the way out the site only uses up approx 3/4 of the page, I have no idea why, here's the code in my CSS.
#media (max-width:767px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
I've the max width to 767 as that's the width of a iPhone to test it out, but no matter what I seem to change nothing happens.