I have created some CSS that uses media queries:
#media (max-width: 1230px) {
.under_navi {
height: 300px;
text-align: center;
.container {
width: 100% !important;
}
.left_image {
float:none;display: inline-block;
width: initial !important;
}
.left_image {
width: 100% ;
}
}
.right_icons {
float: right;
margin-top: 18px;
width: 100%;
text-align: center;
}
.right_icons .icon {
float: none;
display: inline-block;
margin-left: 13px;
}
}
On Windows or any other device it is OK, but not on a MacBook.
The #media (max-width: 1230px) line means the styles will be applied only after 1230px device width.
But on 13.3-inch MacBook (2560 x 1600) it is being applied all the time.
Any ideas?
I noticed a lot that when I was designing on a retina display, it would just ruin most of my work. Try to adjusting your view port settings so it displays as regular resolution and work from there... Until the market is saturated with screens higher than 1080, it kind of sucks to work at higher!
Related
on my website I have a menu. It looks ok on big laptop, tablet and mobile but for small laptops, the logo goes on the menu.
I would like to change the mobile breakpoint of the menu to become a burger menu earlier.
I am using wordpress and the Stockholm Theme.
If there is an area where you can write custom css, a possible solution is to use a media query.
#media only screen and (max-width: 600px) {
//your css styles here
}
This media query applies the styles inside whenever the screen width is smaller than 600px.
There are many resources out there for learning how to create hamburger menus. This should answer your main question.
#media only screen and (max-width: 1199.98px) {
.main_menu { display: none!important; }
.mobile_menu{ display: block !important; }
.mobile_menu_button { display: table !important; }
}
.logo_wrapper {
left: 45%;
position: absolute;
height: 50px!important;
}
.q_logo {
display: table-cell;
position: relative;
top: auto;
vertical-align: middle;
}
.q_logo a {
left: -50%;
width: auto !important;
}
.q_logo img {
top: 0 !important;
left: 0;
}
.header_inner_left{
position: relative!important;
left: 0!important;
margin-bottom: 0;
}
}
1199.98px is the breakpoint that Bootstrap uses for small desktops, but change it to whatever breakpoint fits best for you.
I'm using the below CSS to force the footer to the bottom of the page
#bump {
margin-top: 50px;
height:150px;
}
#footer {
padding-top: 5px;
min-height: 150px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
This works fine on a medium or large screen device, on a smaller device however the footer can end up over the content (responsive footer grows and effectively doubles in height on a small device). So I thought I could use a media query at the end of my style.css with this:
// Small devices (landscape phones, less than 768px)
#media only screen and (max-width: 768px) {
#bump {
margin-top: 50px;
height:300px;
}
#footer {
padding-top: 5px;
min-height: 300px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
}
Its not working though - have I misunderstood something? The media query is at the end of my document, and looking at the developer tools it still considers height to be 150PX on a small screen.
Thoughts pls? Thanks
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
I'm using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
Any idea what is causing this? It's not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I'm using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I'm using?
#media screen and (max-width: 700px) {
/* basics */
#content,
#sidebar,
.endbar_left,
.endbar_right {
float: none;
width: 100%;
}
#content {
margin-left: 0%;
padding-left: 0%;
padding-top: 20px;
}
html,
body {
width: auto !important;
overflow-x: hidden !important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
#header {
padding-bottom: 0 !important;
}
/* posts */
.inside2 {
padding: 0 10px 10px 10px;
}
.post {
padding-right: 3px;
}
.pics_article {
float: none;
margin-left: 0;
}
}
Thank you in advance for your help. FYI, I'm not a web developer. Someone with okay html/css knowledge. Thanks!
Just found the solution by myself! It was !important; in my img properties (not in the above-posted #media query, but in the main part of CSS) causing this distortion. Removing !important; from the below has resolved the issue.
img {
border: none;
max-width: 100% !important;
height: auto;}
I whipped up this site at http://www.flywavez.com/ and have it mostly situated (I have to even up a few margins a pixel here, a pixel there), but I went to check it on the iPhone, Android (galaxy s3 running 4.3, Chrome and the android browser), iPad, and Kindle and I don't think my CSS margins are being interpreted how they are in the screen browsers (i.e. - desktops and laptops).
I used percentages on my margins, and even tried padding, but I can't find that balance where the elements display relatively uniform. Should I specify a separate style sheet just for mobile with the different margins? For the phones, it seems like .socials ( a sprite, btw) would have a margin-left of 0, with a few on top to kick it down some.
The same for #quick-mid-text, on a seperate phone browser, the margin would be left 0.
However I want to keep it as much in one style sheet as possible. What should I use as margins or element arrangement to render the social media icons to be centered under the player, and for the paragraph in #quick-mid-text to be flush with the left edge of the player?
Here's my CSS:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
.socials a {
display: block;
width: 58px;
height: 50px;
float: left;
background: url(../images/socials2.png) 0 0 no-repeat;
}
.socials a:hover {
opacity: 0.5;
}
.socials a+a {
margin-left: 12px;
background-position: -62px 0;
width: 56px;
}
.socials a+a+a {
margin-left: 4px;
background-position: -120px;
width: 32px;
}
.socials a+a+a+a {
margin-left: 4px;
background-position: -156px;
width: 93px;
}
I'd suggest you use media queries to change styles based on screen width. You can do base styles and then override them etc in your media query.
Eg:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
#media only screen and (max-width: 979px) {
.socials {
margin-right: 10px;
}
}
Please Try This css...
#quick-mid-text {
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
width: 42%;
}
.socials { /* style.css -line no.756*/
float: none;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
padding-top: 0;
width: 260px;
}