How to make wordpress widget container full width - php

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

Related

Flipster P goes outside of parent div

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

Bootstrap 4 Nav Bar fixed-top over content

I'm using bootstrap4 fixed-top navbar which works fine in normal browser.
However, when I test on a mobile device (Galaxy S5 using chrome dev options) the content starts behind the nav bar, I've tried some padding in my css but I can't seem to get it to work correctly.
Below is a jsfiddle of the HTML and CSS, the page content starts behind the fixed-top nav bar.
https://jsfiddle.net/8kefh4u7/6/
Also here is my CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.epg-container {
position: relative;
width: 100%;
max-width: 1500px;
overflow: hidden;
display: block;
margin: 0 auto;
background-color: black;
}
.epg-container ul.listings-grid {
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
background-color: #262626;
}
.epg-container ul.listings-grid li {
font-size: 20px;
text-align: left;
}
.epg-container ul.listings-grid .listings-channel-row {
height: auto;
padding: 0;
border-bottom: solid;
border-bottom-width: 6px;
border-color: #262626;
overflow: hidden;
}
.epg-container ul.listings-grid .listings-channel {
/* color not necesary */
color: white;
width: 20%;
height: 83px;
float: left;
text-align: center;
}
.epg-container ul.listings-grid .listings-channel img {
max-width: 100%;
max-height: 100%;
}
.epg-container ul.listings-grid .listings-program {
color: #989898;
border-right: solid;
border-right-width: 3px;
border-left: solid;
border-left-width: 3px;
border-color: #262626;
float: left;
padding: 10px 10px;
background-color: black;
}
.epg-container ul.listings-grid .listings-details-now-info {
color: #fa9609;
font-size: 12px;
}
.epg-container ul.listings-grid .listings-details-next-info {
color: #fa9609;
font-size: 12px;
}
What would be the best way to make the content page always start under the NAVBAR that would work well on mobile.
The recommended method is padding-top on the BODY, the same height as the navbar...
body {
padding-top: 56px;
}
From the Bootstrap docs..
"Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements."
It is unreliable to use a fixed amount for the height of the header to introduce a padding-top to the body element. I'm using this bit of code after a page refresh to set the body to the correct height.
$("body").css({'padding-top': $('nav.navbar').height()});
The navbar is identified using the nav element with the navbar class.
I fixed this so now the content will always start after the fixed nav bar.
I added the below to the body css
min-height: 51.5rem;
padding-top: 2.5rem;
Thank you #ZimSystem for pointing me in the right direction.

Where is this top margin coming from on my Wordpress website

So I am using the Twenty Twelve theme that I have customized. I need to remove the top margin above the header menu. See here http://blog.littlenomads.com/
In my child style sheet I have added:
.site-header {
padding: 0px 0 !important;
margin: 0px 0 !important;
}
/* remove site margin */
body .site{margin:0 !important;max-width: 100% !important;}
.site-content {
margin-top: 0px;
}
I found that solution here: https://wordpress.stackexchange.com/questions/85414/twenty-twelve-theme-remove-margins
I also fully commented out, in the theme Twenty Twelve stylesheet:
/* Minimum width of 960 pixels. */
#media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
/*Brian Ogden 8-12-2014*/
/*body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}*/
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
* Minimum width of 600 pixels. */
#media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
/*.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}*/
I have also tried the solution found here: http://wordpress.org/support/topic/removing-page-title-and-white-space-from-twenty-twelve-theme
I'm guessing you're logged into your site and it's the wp-admin bar shifting the html/body (html { margin-top: 32px !important; } etc .. ) down with the !important styles that get fed into the head when you're logged in?

Mobile site different after integrating Joomla! cms

I am currently creating a website. I made the first initial prototype static but just integrated a Joomla! cms into it. (links removed)
Initially the device width (on my nexus 5 in portrait) comes out at 360, but with the cms integrated the device width comes out at 980 - so the css media queries aren't correct
Is there any Joomla! inserted script that could affect this or could it be the way php pulls files at different times?
Here's the css:
#media (max-width: 991px) {
.topnavitem:hover,
.subnav_item:hover {
background-color: inherit;
}
.long {
box-shadow: black 0px 4px 10px -2px;
}
.footer {
box-shadow: black 0px -1px 3px 0px, white 0px 0px 6px 0px;
}
.sliderimage.teamphotosliderimage {
margin-top: 0px;
}
.sliderimage.varistyimg {
margin-top: -24px;
}
.topnavitem {
position: static;
max-width: 100%;
margin-left: 0px;
padding-left: 40px;
float: none;
}
.topnavitem.w--current {
max-width: 100%;
padding-right: 0px;
float: none;
}
.topnavitem.nodropdown {
position: relative;
max-width: 100%;
margin-left: 0px;
padding-right: 0px;
padding-left: 40px;
float: none;
}
.navmenu {
position: absolute;
background-color: #4d1c1c;
}
.menubutton.w--open {
background-color: #4d1c1c;
}
.navblock {
display: block;
margin-left: 0px;
padding-left: 0px;
float: none;
}
.subnavsection {
position: static;
text-align: left;
}
}
#media (max-width: 767px) {
.long {
box-shadow: black 0px 4px 10px -2px;
}
.sliderimage.varistyimg {
margin-top: 0px;
}
.slider {
height: 250px;
}
.sidelinksimage {
width: 120px;
height: 120px;
margin-right: 5px;
margin-left: 5px;
}
}
#media (max-width: 479px) {
.long {
box-shadow: black 0px 4px 10px -2px;
}
.sliderimage.teamphotosliderimage {
margin-top: 0px;
}
.sliderimage.varistyimg {
margin-top: -16px;
}
.slider {
height: 120px;
}
.sidelinksimage {
width: 65px;
height: 65px;
margin-right: 5px;
margin-left: 5px;
}
.menubutton.w--open {
background-color: #4d1c1c;
}
.gallery_image {
width: 21%;
}
}
Interestingly this setting this fixed it:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

How do I change the width size of the blocks in Moodle? It is CSS? What is the file?

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

Categories