I am having trouble with "media only screen" styling. It looks like that on my mobile phone (ip7):
My css code is like this, but it doesn't have any affect on the page look. I have put meta things in my html file:
#media only screen and (max-width: 768px) {
body {
background-image: none;
background-color: white;
font-size: 20px;
}
#katalog {
height: 10px;
}
#salon {
width: 200px;
}
}
For example orginal #katalog style looks like this
position: relative;
width:50%;
height: 700px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
I was having troubles posting the html code using 'code option' that is added here, so I think
using jsfiddle is better
My page hosted -> https://james0nerep.000webhostapp.com/#
Related
Have small isue with image sizes while using "read more" button on image. Im trying to make image look smaller when using computer, but keep same size for mobile version. When im changing size of image for pc version, image getting too small for mobile version.
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 80%;
left: 80%;
transform: translate(-80%, -80%);
-ms-transform: translate(-80%, -80%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}</style>
<div class="container">
<img src="/wp-content/uploads/2019/11/jaunaudzes-kopšana.jpg" alt="Jaunaudzes kopšana">
<button class="btn">Rādīt vairāk</button>
</div>
pc version image - https://imgur.com/EDhZE7q
phone version - https://imgur.com/xBZ2yhp
So i want to make pc version image smaller and keep same size for mobile. Suggestions?
You can use media queries to solve your issue. In the code below, whenever the screen size is greater than 480px, then the code will "execute".
#media only screen and (min-width: 480px) {
.container img {
width: 80%;
height: auto;
}
}
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 currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}