I am making a flipster slider where people can give reviews about a company. But the text is flowing outside of the div. I tried numerous things but I cant get it to work like I want it. This is what I have:
https://imgur.com/dfLlUSg
and this is what I want:
https://imgur.com/f61MFCf
I am using the Advanced Custom Fields Repeater field.
Also, the two lines of text (above the picture) does not have any whitespaces, I don't know why.
This is how its built:
https://imgur.com/MX49WWB
can anyone help me with this?
This is some extra SCSS:
.flipster {
//margin-top: 75px;
ul {
height: 483px !important;
margin-top: 5px;
.flipster__item--current article {
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
}
li {
&.flipster__item--future {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
&.flipster__item--past {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
article,
.flipster article {
padding: 45px;
width: 460px;
margin: 10px auto;
height: 460px;
background: #fff;
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);
.quote {
text-align: center;
p {
font-size: 32px;
text-align: center;
}
}
.quote-persoon {
p {
font-size: 18px;
color: $oranje;
text-align: center;
padding: 35px 0 5px 0;
display: block;
}
span {
font-size: 16px;
width: 100%;
display: block;
text-align: center;
}
img {
margin: 35px auto 0 auto;
display: block;
border-radius: 75px;
}
}
}
}
}
.flipster__button {
opacity: 1;
svg {
color: $oranje;
}
}
}
When I reload the page, I can see it is all inside the div how it should be but then it just quickly jumps out
I found the problem. it was in the ul.flipster__container. there was a css line: white-space: nowrap;
no idea why that would be of any use
Related
I built a plugin to display a full page tab after you call the shortcode.
This is how it looks when I run it.
When I installed it however this is how it looks
As you can see not only is the tab not a full page, the tabs stylesheet has managed to affect the entire site and disorganized it.
I want to make the tab full width(from one end of the page to another) and I want the style for the plugin to only affect the slider returned by the plugin.
I use elementor page builder and I've tried setting the elementor container's margin to 0. It reduced the space but it's still not enough as you can see from the image. My site's layout is already set to 100% full-width. I would appreciate any help I can get.
Here's the CSS for the plugin below.
.elementor-container {
margin: 0px !important;
}
.bs-example {
margin-top: 20px;
margin-bottom: 20px;
}
.hide23 {
border-style: none !important;
}
.tab-pane {
margin: 20px;
}
.selected {
border-bottom: 2px solid #FF7F50;
}
#media screen and (min-device-width: 300px) {
.tab-content {
width: 50% !important;
}
}
#media screen and (max-width: 800px) {
/* li {width:50%;}*/
ul {
display: none !important;
}
}
#media all and (max-width: 959px) {
.elementor-container {
max-width: 100% !important;
}
.elementor-column-gap-default {
max-width: 100% !important;
}
}
h3 {
font-size: 2vw;
color: black;
}
a {
background-color: #fff !important;
}
ul:hover {
color: transparent!important;
}
ul {
border-style: none !important;
/*border-bottom: 2px solid #FF7F50 !important;*/
}
{
display: inline !important;
color: black;
}
.span-active {
border: 2px solid #FF7F50;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: white;
background-color: #FF7F50;
}
.span-inactive {
border: 2px solid grey;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: grey !important;
background-color: white;
}
.inactive {
color: grey !important;
}
.progress-bar {
background-color: #FF7F50;
}
Let me know if you need anything else. I apologize if the answer is obvious. I'm new to WordPress development
I am new to Laravel. Facing some problem while integrating Laravel-Search. I am follow the below website and got some thing but not perfect.
Laravel_search
In wrote the query like this..
$json = '{
"query" : {
"match" : {
"name" : "apis"
}
}
}';
$params['explain'] = $json;
return $results = Es::search($params);
getting error as unreadable format. What ever i send through above it wil give the below error.
Error:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Whoops! There was an error.</title> <style>.cf:before, .cf:after {content: " ";display: table;} .cf:after {clear: both;} .cf {*zoom: 1;} body { font: 14px helvetica, arial, sans-serif; color: #2B2B2B; background-color: #D4D4D4; padding:0; margin: 0; max-height: 100%; } a { text-decoration: none; } .container{ height: 100%; width: 100%; position: fixed; margin: 0; padding: 0; left: 0; top: 0; } .branding { position: absolute; top: 10px; right: 20px; color: #777777; font-size: 10px; z-index: 100; } .branding a { color: #CD3F3F; } header { padding: 30px 20px; color: white; background: #272727; box-sizing: border-box; border-left: 5px solid #CD3F3F; } .exc-title { margin: 0; color: #616161; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .exc-title-primary { color: #CD3F3F; } .exc-message { font-size: 32px; margin: 5px 0; word-wrap: break-word; } .stack-container { height: 100%; position: relative; } .details-container { height: 100%; overflow: auto; float: right; width: 70%; background: #DADADA; } .details { padding: 10px; padding-left: 5px; border-left: 5px solid rgba(0, 0, 0, .1); } .frames-container { height: 100%; overflow: auto; float: left; width: 30%; background: #FFF; } .frame { padding: 14px; background: #F3F3F3; border-right: 1px solid rgba(0, 0, 0, .2); cursor: pointer; } .frame.active { background-color: #4288CE; color: #F3F3F3; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .1); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); } .frame:not(.active):hover { background: #BEE9EA; }
How query know about the table name here. Where should i need to put the table name. help me out plz..
If you need an easy to use laravel package to talk to Elasticsearch, take a look at this one: https://github.com/freekmurze/searchindex
I've been designing my site re-learning CSS after taking a long time, and have been essentially creating a website (integrated with WordPress) by basically doing as little as possible with the HTML/PHP, and trying to design it all from the CSS and available CLASS and IDs setup for me by a template theme. (Blankslate Theme)
This entire time it's been coming along fine in Chrome. I decided before I got too far to check it out on Firefox. Firefox decides everything should be squished to the LEFT, while in Chrome the site looks perfectly centered and matches things I try to do in the CSS.
I tried to align both the WRAPPER, Body, and even HTML to center the entire page, but Firefox refuses to do so. My fixed sidebar on the right is suppose to be spaced away from the main content, which it is in Chrome (unless you increase the size of the entire page, then it overlaps.) In Firefox, it doesn't even try to go as far right as possible, it just squishes in with everything else.
I've also wanted to use Ellipsis to cut off the text in the Sidebar if it's too long, however it refuses to work. It either cuts the text off, but does not substitute ellipsis, or runs off the page.
Below is the structure I'd like:
http://www.icesage.com/i/site2.png
Here is the CSS I'm using. As for the PHP/HTML structure you'll need to go to the actual website itself as there are too many to show here. (Again, it's WordPress, and uses the theme Blankslate as a starting point.)
body {
background-color: black;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 110%;
line-height: 20px;
text-size: 10px;
font-family: Verdana;
}
#site-title {
position:relative;
top:0px;
margin: 0 auto;
width: 10%;
display:none;
}
/* #header {
position:relative;
top:0px;
margin: 0 auto;
width: 40%;
} */
#footer {
position: relative;
float: right;
bottom: 0;
margin: 2% auto;
right: 25%;
width: 50%;
height: 10px; /* Height of the footer */
background-color:rgba(0,0,0,0.7);
border-radius: 10px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
text-align: center:
padding-top: 5px;
padding-bottom: 9px;
padding-right: 5px;
padding-left: 5px;
display: inline
}
#copyright {
text-align: center;
}
/* Top Navigation */
#menu {
margin: 0 auto;
}
#menu a {
float: left;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
#menu a:hover {
background-color: blue;
}
.entry-title {
font-size: large;
width:60%;
text-shadow: 2px 0.5px #1c6191;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin: 2px
}
/* h1 .entry-title {
display: none;
font-size: 50px;
}
h2 .entry-title {
display:none;
font-size: 50px;
}
h3 .entry-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
h3 .widget-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
*/
.cat-links {
display:none;
}
/* Main Content Post (Entry) */
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
img.alignright {float:right; margin:20px 10 10em 10em; background-color: royalblue; border: 1px;}
img.alignleft {float:left; margin:20px 10em 2em 2em;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; text-align:center; padding-left: 20px;}
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
.wp-caption-text {
font-size: small;
font-style:italic;
text-align:center;
}
.post-edit-link {
float: left;
color: white;
position: relative;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.post-edit-link:hover {
background-color: blue;
}
.comments-link {
float: right;
color: white;
display: block;
position: relative;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.comments-link:hover {
background-color: blue;
}
.type-page {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 40px
overflow: auto;
}
.nav-previous {
display: none;
}
.comments {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
.comment {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
#header {
width: 60%;
margin: 0 auto;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin-bottom: 40px;
}
#titlebanner {
margin: 0 auto;
}
.meta-sep {
display: none;
}
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
.comment-respond {
color: white;
width: 60%;
float: left;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
margin: 0 auto;
box-shadow: 5px 0px 4px 0px #1c6191;
font-color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
.entry-date {
color: royalblue;
}
#wrapper {
-moz-margin-start: -40px auto;
margin-right: 0 auto;
}
/* Sidebar */
.widget-area {
position: fixed;
top: 225px;
z-index: 1;
right: 0.5%;
text-shadow: 2px 2px #1c6191;
width: 300px;
float:left;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
color: white;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
margin-right: inherit;
}
.xoxo {
display:block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"
}
#searchsubmit {
display:none;
}
.searchform .screen-reader-text {
display:none;
}
.xoxo .screen-reader-text {
display:none;
}
.entry-content {
width: 90%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
text-align:justify;
/* text-shadow: 2px 0.5px #1c6191; */
}
P {
color: white;
}
#search {
display:none
}
#site-description {
display:none
}
A {
text-decoration: none;
font-family:Verdana;
}
A:link {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:visited {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:active {text-decoration: none;
color:#04CCFD;
}
A:hover {
text-decoration: none;
color:white;
}
li .widget-container {
font-color: white;
}
/* Sub-Menu Test */
/* End Sub-Menu Test */
video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
section{display:block}
.clear{clear:both}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
Website: http://www.icesage.com
Or you can take a look at "Blankslate."
Any help in figuring out what I'm doing wrong or pointing out some sloppy code would be appreciated, but the main question for this post is:
How can I contain everything in the wrapper properly and have the entire site centered, including the sidebar, in all browsers (especially Firefox) like how it appears in Chrome? (Additionally, some of the layout was done accidentally, like the Comment & TopNav buttons appearing slightly off the previous area. Which I want to keep, but I'm not sure how to properly keep it that way.)
I searched thoroughly and the answers provided keep telling me the appropriate CSS to use, and I keep using it to no avail. Other questions are simply left unanswered.
Any help would be appreciated!
The problem is coming from the way you used transform-origin for firefox browser. Look at the following class
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
As you mentioned "0 0" for origin property. The first value is the horizontal position, the second value is the vertical. So it aligned to left and top position. If you want horizontally center the page then you need to give "center, top" or "50%,0". Update your CSS like below.
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin:50% 0;
margin: 20px auto;
}
Additional Question asked by OP in the comment box:
do you know why the sidebar is still condensed and overlapping the content on the left, when it doesn't do that in Chrome?
This issue came because the default behavior of chrome and firefox. Look at the following class.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
The default chrome property for box-sizing:border-box and firefox is box-sizing:content-box. This is causing the problem. Check what is the difference between these to here
So force firefox to use border-box property for box-sizing. Update the CSS like below.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
-moz-box-sizing:border-box;
}
The site looks in Chrome exactly as it looks in Firefox. Because of this here:
margin-right: 0 auto;
which is an invalid property for margin-right. You want
margin: 0 auto;
o css no caminho /www/moodle/theme/mytheme/style : custom.css
/* Custom CSS
-------------------------*/
body {
background: url([[pix:theme|bg]]) repeat scroll 0 0 rgba(0, 0, 0, 0);
padding-top: 60px;
color: #58585A;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
margin: 0;
}
#page {
padding-top: 47px;
}
a.logo {
background: url([[setting:logo]]) no-repeat 0 0;
display: block;
float: left;
height: 75px;
margin: 0;
padding: 0;
width: 100%;
}
.dir-rtl a.logo {
background: url([[setting:logo]]) no-repeat 100% 0;
display: block;
float: right;
}
.navbar-inner{
background: #F5F5F5;
}
.navbar .navbar-inner a.brand span {
display: none;
}
.navbar .navbar-inner a.brand {
background-image: url([[pix:theme|logo]]);
background-position: center center;
background-repeat: no-repeat;
min-height: 74px;
padding: 5px 20px;
width: 214px;
}
.navbar .nav {
margin-top: 17px;
}
.navbar-text, .navbar .nav > li > a{color:#E8770D;}
.breadcrumb {
border-radius: 4px;
list-style: none outside none;
margin: 0 0 20px;
padding: 8px 15px;
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
}
.coursebox {
border: 1px dotted #DDDDDD;
border-radius: 4px;
margin-bottom: 15px;
padding: 5px;
background:#f5f5f5;
}
/* Custom CSS Settings
-------------------------*/
[[setting:customcss]]
Moodle puts all the css into one file for speed. To turn this off, add this line to config.php - on a development site not a production site...
$CFG->themedesignermode = true;
Then in Chrome, refresh the page, right click on the block and inspect element. It should now show the original css file.
After you have finished, remove the themedesignermode line or set it to false because it will make the site verrrry slow... http://docs.moodle.org/dev/Creating_a_theme#Theme_designer_mode
You might also need to purge the cache after making any changes - http://docs.moodle.org/26/en/Purge_all_cache
I'm making a website in HTML, CSS, and PHP and the page goes way beyond the screen but there is no scroll bar provided by the browser (Safari 5.0.6 and Firefox 14.0.1 on Mac). Is it because I included the PHP? But shouldn't that be there before the page is rendered?
Here is a link: test website
My PHP syntax:
<div id="content">
<div class="wrapper">
<div id="home" class="alert">
Welcome to always4free©! To browse the classifieds, you must first either choose a location or have your location detected.
</div>
<?php include "res/pages/categories.php"; ?>
</div>
</div>
</div>
What is going on?
EDIT: Here is my CSS:
body {
background-image: url("http://always4free.org/site/images/bg.jpg");
background-size: cover;
font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
margin: 0 auto;
width: 850px;
}
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#logo {
color: rgba(255, 255, 255, 0.7);
float: left;
font-family: "Wendy One",sans-serif;
font-size: 30px;
line-height: 50px;
width: 250px;
}
#logo a:hover {
color: #FFFFFF;
}
#nav {
float: right;
line-height: 50px;
width: 600px;
}
#nav a:first-child {
margin-left: 0;
}
#nav a:last-child {
margin-right: 0;
}
#nav a:link, #nav a:visited {
color: rgba(255, 255, 255, 0.9);
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#nav a:hover {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
padding-bottom: 1px;
}
#nav a.detect {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px 2px 2px 2px;
color: rgba(0, 0, 0, 0.7);
padding: 5px;
}
#nav a.detect:hover {
color: #000000;
}
#content {
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-top: 70px;
}
.page {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border: 1px solid green;
color: #FFFFFF;
font-size: 20px;
padding: 10px;
}
.alert {
background: none repeat scroll 0 0 #AD2E1D;
border: 1px solid #911E0F;
color: white;
font-size: 20px;
padding: 10px;
text-align: center;
}
#categories {
margin-top: 20px;
}
#categories h2 {
color: rgba(255, 255, 255, 0.7);
font-family: "Wendy One",sans-serif;
font-size: 26px;
}
#categories a:link, #categories a:visited {
background: none repeat scroll 0 0 white;
color: black;
padding: 3px;
}
#categories .block {
line-height: 35px;
}
You have all of your content wrapped inside an element of position: fixed;. The body is not able to retrieve the height of fixed or absolute children and is therefore set to an actual height of 0 - thus eliminating any need for scrolling.
If you move your #content element outside of the fixed header things should be working as expected.
Move your div with id content outside of your header div.
It will solve your problem.
Add a clearfix class with your .wrapper so that it have a height and then use:
.wrapper{
overflow: scroll;
}
add overflow: scroll; in your #header style and change position to relative.
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: **relative**;
top: 0;
width: 100%;
**overflow: scroll;**
}