I am trying to edit the look of of the two blue BaseKote product boxes on this page http://korekote.com/epoxy-coatings-1
I need to make the blue backgrounds full width after the responsive screen size of 768. So any screen size below 768 will have these boxes full width. What I am trying to match are the full width boxes above...ShieldKote and VaultKote. Note the 10px space between the two sections.
I am new to all of this type of css but really want to learn it. Below is what I have started with and for some reason it will not work.
#media handheld, only screen and (max-width: 967px) {
.basekote-bondkote-column .mk-image-inner img {
max-width: 450px;
}
.text-blocks .vc_col-sm-6 {
width: 100%;
}
.curing-profile .vc_col-sm-6 {
width: 100%;
}
body .vc_custom_1447710738280 {
border-right-width: 0px !important;
border-left-width: 0px !important;
}
#basebondkote .mk-padding-wrapper {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.vc_custom_1447710747652 {
border-right-width: 0px !important;
border-left-width: 0px !important;
}
.vc_custom_1447710738280 {
margin-top: 10px;
margin-bottom: 10px;
}
}
You state:
I need to make the blue backgrounds full width after the responsive
screen size of 768. So any screen size below 768 will have these boxes
full width. What I am trying to match are the full width boxes
above...ShieldKote and VaultKote.
The style rule you are looking for (which expands the width of the ShieldKote and VaultKote sections to 100% below a certain viewport width) is:
#media handheld, only screen and (max-width: 967px) {
.mk-grid .coatings-product-column {
width: 100%;
}
}
Related
I'm looking at a page in 1920*1080 resolution.
It's too much wide to spread all content from right to left, so I apply on body:
width: 77%;
background: #eee;
To get gray margins.
77%*1920 = 1478, so this means that I wouldn't want any margin once window size i below 1478px.
However, when window size is getting reduced towards 1478, I also want to reduce the margins.
For example: 1920-1478=442, half of it is 221, so when window size is 1478+221=1699 then margins should be about 88.5%, and not still in 77%.
So I need some calculation that will do this for any given size. It's a common practice isn't it? but how to do that?
body {
width: 77%;
background: #eee;
margin: 0 auto;
}
#media (max-width: 1700px) {
body {
width: 89%;
}
}
#media (max-width: 1498px) {
body {
width: 100%;
}
}
what you're actually trying to do is to give a max-width: 1498px to the container, so instead of applying the rule to the body use a container element (e.g. <main>) and give it a center alignment using margin: 0 auto
See the example with a large resolution
body {
padding: 0;
margin: 0;
background: #eee;
}
main {
max-width: 1498px;
background: #fff;
margin: 0 auto;
}
<main>
main element
</main>
I'm having trouble getting the background to display correctly on my landing page. On my desktop, it shows up fine, but on mobile, it appears to be centered in the middle vertically at the top of the page. I'm new to front-end and have been trying all sorts of hacks over the past 4 hours. Could somebody point me in the right direction?
I've set the image to scale to cover the entire screen. There shouldn't be any blank areas. I've tried using responsive modes on my desktop, and the Wright Glider mostly stayed in view as I resized, so the image should also center in the middle of the ... viewport?/window.
For the background, I have a normal sized image, and a cropped image I use for smaller devices
My site is at http://we-fly.ddns.net
Tested only with Chrome 49 on all devices, Android is v5.1
Responsive mode on the desktop doesn't seem to produce the same results.
Source: https://gist.github.com/yanalex981/992a60dd54be82162a45
Screenshots:
Desktop
Nexus 4
Galaxy Tab A 8
Also, if anybody has any suggestions, please share them with me
To fix the issue of your image getting cut off part way, you need to set your background position in your media query's to initial... So in each of your css Media query's paste the following code:
background-position: initial;
This will reset your background position to default when on mobile... from here you should be able to apply different styles to stretch/expand the image to your liking. :)
This is my second answer, I created this instead of adding it to my initial answer because the method is different.
In your HTML (index) file, add the image like this:
<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />
(I suggest adding it directly after the body tag)
In your CSS, I am just going to post the entire thing, Its a little funny because your last #Media (Min-Width: 601px) is overriding your default for your desktop page... you may want to consider deleting this Media Query... See comments in code below to see changes:
/* Set initial values for your image background */
#imgBackground{
position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
top:0px; /* Set top edge to 0px (Top of the screen) */
left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
width:100%; /* We want our widt to be 100% of our browser window */
height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}
body {
text-align: center;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
}
#quote-conatiner {
position: fixed;
margin: auto auto 24px auto;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
background-color:rgba(180, 180, 180, .4);
}
h3 {
font-family: Garamond sans-serif;
color: white;
width: 80%;
margin: .5em auto .5em auto;
}
.button {
font-family: sans-serif;
text-decoration: none;
padding: .3em 0.6em;
border-radius: 8px;
border: 2px solid #59169c;
background-color: #417;
color: white;
box-shadow: 0 0 64px black;
}
.button-container {
position: fixed;
margin-left: auto;
margin-right: auto;
top: 80%;
left: 0;
right: 0;
}
.button:active {
background-color: #330855;
}
#media only screen and (max-width: 600px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 1.2em;
}
.button {
font-size: 1.4em;
}
}
#media only screen and (max-width: 400px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 0.8em;
}
.button {
font-size: 1.0em;
}
}
/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
#media only screen and (min-width: 601px) {
/* Set image background qualities for any display larger than 601px.*/
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
max-width: 600px;
font-size: 1.3em;
}
.button {
font-size: 1.3em;
}
}
"background-size: cover" does not cover mobile screen
and
height: 100% or min-height: 100% for html and body elements?
held the answer. I had to set the height of the root elements for background-size: cover to work:
html {
height: 100%;
}
body {
min-height: 100%;
}
It works on the Nexus 4 and on the Galaxy Tab
Reason for having to do this (stolen from last answer):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
#Alex how exactly you want image to be display...for different screen size you can use the #media css property to resize image as per screen size.
#media screen and (min-width: 480px) {
body {
property: attribute;
}
}
See more about the #media css attributes here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am trying to create a Reddit page using CSS. My problem is scaling. I want to make an object, .side, smaller in length. On my 1080p monitor, it looks great, but when I zoom in or out it will not scale with the browser. It is also too large on mobile.
Here is the code:
#header {
background: url(%%rtv6a%%);
background-repeat: no-repeat;
background-position: -3px 24px;
height: 130px;
}
#header-bottom-left
{
position: absolute;
bottom: 0;
}
div.side div.spacer:nth-of-type(5)
{
background:url(%%tangoglobe4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
}
div.side div.spacer:nth-of-type(5):hover
{
background:url(%%goglobal4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
transition: .6s;
}
body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer
{
background:url(%%whiteticks%%);
}
.sitetable
{
background:url(%%ticks%%);
}
.morelink .nub
{
display: none;
}
.sitetable
{
max-width: 83%;
border-color: #5C5C5C;
border-style:solid;
border-width:1px;
}
Here is what I want it to look like: http://i.imgur.com/CM1Ejgp.jpg
When I scale it: http://i.imgur.com/HGsnSvD.png
You will notice the grey box get farther and father away. What can I do to fix this?
Sorry, I am new to coding.
You might want to look into media queries:
Media queries look at the capability of the device, and can be used to
check many things, such as:
width and height of the browser window
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more
You can use media queries to set sizes and widths of text or containers in CSS depending on the size of the browser. Eg:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
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 working on a very basic one page layout that needs to be responsive. It consists
of one large background image and 2-3 divs absolutely positioned around it. http://www.reversl.net/demo/ The reason I'm using absolute positioning is because the background image will need to vary in height but the text box needs to always be positioned the same distance from the bottom of the image.
I also need to place a logo bottom right of the page. Everything works well when viewed on desktop devices. But on smartphones, due to their smaller screens I need to position the logo beneath the text using media queries. Now here's the problem....because the text div is positioned absolutely....the logo get's hidden behind it on smaller screens. My initial thought was to give the logo an absolute position from the top so that it always appears beneath the text box on screen sizes 320px wide and below. However, the text box will need to vary in height so I can't work it this way.
My Question is...how can I place the logo so that it always appears beneath the text box (regardless of the text box height) on screen sizes 320px wide and below?
#bg {
max-width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#title {
margin: 0;
padding: 0;
color: #f0f0f0;
background: #333;
margin: 0;
padding: .5em 1em;
width: 250px;
position: absolute;
top: -2%;
text-align: center;
}
#content {
background: #333;
width: 250px;
position: absolute;
top: 85%;
padding: .5em 1em;
color: #888;
text-align: center;
border: 1px solid #444;
}
footer {
margin: 0;
padding: 0;
}
.logo {
float: right;
width: 50px;
height: 25px;
border: 1px solid #444;
text-align: center;
padding: .5em;
color: #666;
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#title {top: -17%;line-height: 1;}
}
Desired Layout on mobile
I'm sure you figured this out by now - but one approach that can sometimes be useful is to put the same logo twice in the HTML and show or hide the one you want depending upon the width. I find this to be more maintainable, and obviously if the image has the same URL then there's minimal overhead. Absolute positioning is no fun.
// mobile
#media only screen and (max-width : 319px)
{
.logo.right-justified
{
display: none; // hide right logo
}
}
// desktop
#media only screen and (min-width : 320px)
{
.logo.underneath
{
display: none; // hide bottom logo
}
}