I have a website I am working and the form isn't sitting in the right place it keeps shifting and moving I spoke to tech support they gave me some code it worked for a bit now it's off again can someone please help.
This was the code:
button.et_bloom_submit_subscription {
float: right;
position: fixed;
top: 7px;
right: 310px;
}
.et_bloom .et_bloom_form_content .et_bloom_popup_input {
width: 25%;
}
button.et_bloom_submit_subscription {
width: 21% !important;
}
.et_bloom .et_bloom_inline_form {
left padding: 60px;
}
.et_bloom .et_bloom_inline_form {
margin: 0;
}
.et_bloom .et_bloom_header_outer {
display: none;
}
#media only screen and (max-width:1100px) {
.page-id-453 .et_bloom_form_content {
width: 100% !important;
margin: 0 auto !important;
}
.page-id-453 .et_bloom_form_content .et_bloom_popup_input {
width: 25% !important;
margin-right:2%;
}
.page-id-453 .et_bloom_form_container button {
width: 45% !important;
padding:13px;
top:auto !important;
left: auto !important;
margin: auto !important;
float: right !important;
}
}
And this is the website www.askleewellard.com (form is right below the graphic).
Related
I've been trying to create a custom styling for a component and it requires printing, the problem is that whatever i want to print comes out duplicate.
I tried to recreate in codepen but I wasn't able to.
This is what I added to css print:
#media print and (color) {
#page {
margin: 5mm;
size: A4 landscape;
}
* {
overflow: visible !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important;
padding: 0 !important;
color: #212121 !important;
visibility: hidden;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
}
body,
.section-to-print {
height: auto !important;
}
.section-to-print,
.section-to-print * {
visibility: visible !important;
}
.section-to-print {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
display: block !important;
}
.section-to-print:nth-child(2) {
display: none !important;
}
.vis-timeline {
display: none;
}
core-dialog,
.dialog-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
}
Turns out the problem was that the parent element had "position:fixed", that's the cause of the duplication in my problem.
I am building a mobile app and encountered an issue where the bottom part of my screen is covered up by the bottom navigation screen.
Screenshot of issue
I tried to add a margin bottom as below:
.dashboard(style="margin-bottom: 58px; margin-top: -10px;")
#region
#menu-region
The strange thing is that this works if I run the code on my desktop but does not work when it is run on the mobile phone.
Question: How can I update the CSS so that it allows me to add a padding at the bottom of the screen so that the bottom part of the screen is not covered by the nav bar on the mobile?
CSS for bottombar
.bottombar {
background-color: $theme-color;
height: 58px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 1000;
.footer-icon {
padding-top: 17px;
text-align: center;
width: 20%;
}
table {
width:100%;
height: 100%;
border: 0px;
padding: 0px;
border-spacing: 0px;
background-color: transparent;
tr {
td {
width:20%;
background-color: transparent;
text-align: center;
position: relative;
}
.menu-corner-color {
background-color: #1189b6;
}
.menu-side-color {
background-color: #006990;
}
.menu-middle-color {
background-color: #004965;
}
.circle {
}
}
}
}
Jade for layout
.footermenu
.bottombar
table(style="width:100%; height: 100%; border: 0px; padding: 0px; border-spacing: 0px; background-color: ")
tr
td.notifications.menu-corner-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.coach_chat.menu-side-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.log.menu-middle-color
i.material-icons.md-light.md-24
td.community.menu-side-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.profile.menu-corner-color
i.material-icons.md-light.md-24
I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.
What would be the correct way to do this? I feel like I'm going down the wrong path.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/
Is this what you are looking for? If so its just some quick changes in your CSS:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
I updated your js.fiddle here.
It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.
I am using the 978.gs system in a site that I am creating but it is inserting a small band at the top of the page moving the content down slightly. I don't want this to happen.
The site in question is Located Here look at the top of the page.
and my CSS code is
/* Initiate 978.gs */
div.layout-978 { width: 978px; margin: 0px auto; }
div.row { height: 1%; }
div.row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }
div.col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 { float: left; margin-left: 30px; }
div.col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child { margin-left: 0px; }
div.col1 { width: 54px; }
div.col2 { width: 138px; }
div.col3 { width: 222px; }
div.col4 { width: 306px; }
div.col5 { width: 390px; }
div.col6 { width: 474px; }
div.col7 { width: 558px; }
div.col8 { width: 642px; }
div.col9 { width: 726px; }
div.col10 { width: 810px; }
div.col11 { width: 894px; }
div.col12 { width: 978px; }
/* Main CSS */
body{
background: url('img/bg-texture.jpg');
position:relative;
}
Solution:
To fix this problem I edited the following css entry
body{
background: url('img/bg-texture.jpg');
position:relative;
margin-top:0px;
}
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/