I'm trying to make my coded buttons for pdfs/mp3s/mp4s not stack on each other in a asymmetrical way when the browser is faced with a different screen size. For example, when the screen size changes from large desktops approximately 1200px wide to tablet res of 1024px to 768px (landscape/portrait), the buttons stack on each other in a way that looks inefficient/unintended. See for yourself:
http://www.mannachurch.org/portfolio-type/insights-from-the-bottom-bunk/
Try moving the browser to something that would fit a 13 inch or a tablet and you get what I mean. This is just for the buttons, everything else looks fine.
I'm trying to resolve this issue using this media query code on that wordpress site in my header.php file:
/* iPhones ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media all and (min-width: 250px) and (max-width: 400px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in landscape----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in portrait----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/*Larger screens -----------*/
#media only screen and (min-width : 1024px) and (max-width: 1224px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
It will not make those buttons do anything different!!
What am I doing wrong? Wordpress is frustrating enough because it's layered with an endless piles of CSS files. But I'm strugging to see why I can't grab these and make them work with media queries. I'm pretty sure my declarations are correct. Any suggestions?
Omit spaces in your CSS declarations like this a.btn.pull-left.
All wordpress themes come with their own style.css file. Instead of putting css in a php file (header.php), you should edit the .css file. Your button overrides should work there.
Most themes also have their own custom css field in theme options as well if you do not feel comfortable editing style.css in the editor. It's the same thing though.
Related
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
I wanted to make responsive website, and I used media query.
One thing I don't understand is, iPhone 6 and LG G5 has different image size. What I figured out is many android device's image size is same.
Is this about IOS and Android problem? or my codding is wrong?
#media only screen and (max-width: 1920px) {
.btn{
width:70px;
height: auto;
}
}
#media only screen and (max-width: 764px) {
.btn{
width:50px;
height: auto;
}
}
#media only screen and (max-width: 364px) {
.btn{
width:40px;
height: auto;
}
}
Thanks for helping :)
Try with
I phone 6 media Query
#media (max-width:667px){ /* do something here */ } /*landscape view*/
#media (max-width:375px){ /* do something here */ } /*portrait view*/
I'm currently building a small website including RWD features to enable it to work well on mobile devices.
My media queries seem to work correctly in portrait mode. However, when I rotate the devices the rules don't seem to apply any more.
Portrait Mode (320x480)
Using the code:
#media only screen and (min-width: 320px) and (max-width: 480px)
The same media query renders this in
Landscape Mode (480x320)
As you can probably make out, my media queries adjust the font size depending on the width of the screen. Strangely, the font in the Landscape view does not change even though the media query applies to it too.
The full code of the media queries:
/*................................
MEDIA QUERIES - Phones
..................................*/
#media only screen and (min-width: 320px) and (max-width: 480px) {
/*............................
FONTS
..............................*/
html {
font-size: 70%;
}
p.promo {
line-height: 1.4em;
}
}
/*..............................
LAYOUT
................................*/
.clientLogo {
float: left;
height: 60px;
width: 60px;
margin: 10px 10px 10px 30px;
background: $moondust;
}
/* Phones - Landscape */
/*................................
MEDIA QUERIES - Tablets
..................................*/
#media only screen and (min-width: 481px) and (max-width: 768px) {
/*............................
FONTS
..............................*/
html {
font-size: 85%;
}
p.promo {
line-height: 1.5em;
}
/*.............................
LAYOUT
...............................*/
.clientLogo {
float: left;
height: 80px;
width: 80px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
/*................................
MEDIA QUERIES - Desktops
..................................*/
#media only screen and (min-width: 769px) {
/*............................
FONTS
..............................*/
html {
font-size: 100%;
}
/*...............................
LAYOUT
.................................*/
.clientLogo {
float: left;
height: 120px;
width: 120px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
Have you tried this?
#media (min-width: 480px) and (orientation: landscape) { ... }
I have 2 media queries as below!
#media screen and (max-width: 800px){
.rightlist{
margin-top: 0px !important;
}
}
#media (max-width: 1000px) and (min-width: 801px){
.rightlist{
margin-top: -10px !important;
}
}
When both media queries together the above query is overriding the below one. Is there someone who know the fix for this? Thank you for your help!
Just use this , this css will be applied for screen up to 1000px but as soon as you will hit 800px your previous media query will be apply
#media (max-width: 1000px){
.rightlist{
margin-top: -10px !important;
}
}
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}