I'm working on this site on wordpress. Overall the design works well while viewed in mobile phones, But the header image doesn't resize along with the text which is over it.
"http://bodyinbalancenewyork.com/"
Is it caused because of css media queries? Help!
Below style is applied to the header image,
.vc_custom_1457453060838 {
margin-top: -60px !important;
border-bottom-width: 15px !important;
padding-top: 200px !important;
padding-right: 150px !important;
padding-bottom: 150px !important;
padding-left: 150px !important;
background-image: url(http://bodyinbalancenewyork.com/wp-content/uploads/2016/02/nyc-chiropractor.jpg?id=969) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-bottom-color: #020202 !important;
border-bottom-style: solid !important;
border-radius: 4px !important;
}
The problem is that using Javscript styles are being applied to the header and bootstrap is not used inside the header. That is why it is not responsive on the mobile phones.
Related
I collapsed with problem that devtools for mobile looks ok, but when I open project on iphone main image crashes and appeared only 1/4 of its size. Which properties I should add to make it adaptive on iphone?
Here is css code:
.main-page__background {
background-image: url("../../../images/main.jpg");
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
transition: opacity 0.4s;
background-color: #2a2c2f;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
you could resize your image for mobile screens and make a copy of it, then change the background image in a media query.
#media(max-width: 400px){background-image: url("../../../images/new smaller image");}
Hi i am new to jquerymobile .i am developing a site using jquerymobile and phonegap, i am able to make it for the mobile device but i am facing hard time making my site look good on browser.
I want my complete site to be centered ,but my header and footer seems to have a problem , there is gap on top for header and gap at bottom for footer iam doing as below.
#media only screen and (min-width: 1025px){
.ui-page {
width: 560px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #666 outset !important;
border-left: 5px #666 outset !important;
}
}
#media only screen and (min-width: 1025px){
.ui-header,.ui-footer {
width: 560px !important;
margin: 0 auto !important;
position: relative !important;
}
}
As u can see from pics there are gaps on top of header and bottom of footer.
need to remove those gaps and i need suggestions on different pixel sizes for best viewing.
Any help is appreciated
For the header and footer, you can set the width to 560px, then set the left position to 50%, then give it a negative left margin equal to half the width (-280px):
#media only screen and (min-width: 1025px) {
.ui-page {
width: 560px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #666 outset !important;
border-left: 5px #666 outset !important;
}
.ui-header-fixed, .ui-footer-fixed {
width: 560px !important;
left: 50%;
margin-left: -280px;
}
}
DEMO
I'm trying to do some styling on Twitter Bootstrap modal close icon. This is the CSS I'm using:
.modal-header .close {
float: right !important;
margin-right: -30px !important;
margin-top: -30px !important;
background-color: white !important;
border-radius: 15px !important;
width: 30px !important;
height: 30px !important;
opacity: 1 !important;
}
It works pretty good on Chrome / IE, however sometimes on Firefox I get strange behavior (image is attached). Is there additional CSS rule that I have to supply to have this work on Firefox as well?
Depending on the version of firefox you may need to add -moz-border-radius: 15px
This proved to be an issue with graphic card(s) on several laptop(s) that were using Intel graphics. Funny thing is that only Firefox was susceptible to this problem.
Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/