I'm not sure why the follow CSS code isn't doing anything, it was working I did some changes it was a good bit I don't really call all what I changed, but then now its just staying on what's supposed to be the mobile version. I also tried adding "screen" and "all", nothing.
Running it in updated Google Chrome and also tried Edge.
/*
MEDIA QUERIES
*/
#media (min-width: 615px) {
header h1 {
transform: scale(1,1);
text-align: left;
padding-left: 5%;
}
.main-container img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.mobileRef {
display:none;
}
nav a {
font-size: 18px;
}
nav li {
padding: 0 1.5%;
}
nav {
text-align: right;
}
header p {
display: inline-block;
float: right;
font-size: 1.3vw;
margin: 12px 5% 0 0;
}
.break {
display: none;
}
)
Change your end bracket on your query. Should be }, not )
#media (min-width: 615px) {
.class
{
.myclass:value;
}
}
Related
when I visit this page on Chrome:
https://www.rubyrange.com/shop/adventure-tours/adventure-van-tours/from-the-rockies-to-alaska-go-wild-calgary-whitehorse/
I can print 6 pages. When I visit this page on Firefox I can print 3 pages and it seems that pages 3,4,5 are missing.
Anybody has an idea what is wrong in the print css here?
/* Print Style Sheet */
#media print {
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
#page {
/*size: auto;
margin: 0;*/
}
body {
/*margin: 10mm;*/
}
.site-inner {
position: relative;
top: 0;
}
.header-image .wrap > a {
top: 0;
}
.related.products,
.top-bar,
.header-bar-wrapper,
.nav-primary,
.ruby-booking-wrapper,
.envira-gallery-position-overlay,
.tours-legend,
.tours-media-headline--gallery,
.envira-gallery-wrap {
display: none;
}
a[href]:after {
display: none;
visibility: hidden;
}
.product .entry-summary {
display:flex;
flex-direction: column-reverse;
font-size: 1.3rem;
}
.tours-summary-wrapper {
width: 100%;
float: none;
}
.tours-teaser-wrapper {
width: 100%;
float: none;
padding-left: 0;
}
.tours-media-wrapper {
display: none;
}
.woocommerce-Tabs-panel {
display: block !important;
}
.tours-available-dates {
width: 100%;
}
.single-product .ruby-print-box {
display: none;
}
}
I am learning how to make responsive websites. I downloaded Responsive Grid System and I am learning responsiveness with this system (you'll see what I have In html on screenshot).
Now I have some troubles with positioning. I use media queries. For mobile view from 320px to 480px I have no problem, but then when I want to make logo centered in range 480px to 768px I have problem with col span_6_of_12 (you'll see that also on the screenshot). I have logo in one col span_6_of_12 and then I have menu in second col span_6_of_12. When I want to make logo centered, this menu col span_6_of_12 is still there and I can't make this logo centered (I hope you understand me.)
HTML and Chrome view
- Here is screenshot of my HTML and Chrome view on site.
And here is CSS code:
html {
background-color: #FFF;
}
body {
width: 100%;
margin: 0 auto;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
nav ul {
width: 100%;
text-align: center;
padding: 0;
margin: 10px 0;
}
nav li {
display: block;
padding: 10px;
}
#menu {
display: none;
}
#media screen and (min-width: 320px) and (max-width: 480px) {
#logo {
font-size: 2em;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}
#menu {
display: none;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
#menu {
display: none;
}
#logo {
text-align: center;
font-size: 2em;
text-transform: uppercase;
margin: 0 auto;
}
}
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
So I want the divider line on the picture to decrease or increase in size based on the All publications link. Currently I have done it like this, but I'm wondering if there's a better solution for this?
#media (max-width: 767px) {
.dividing .col-xs-6 {
width:75%;
}
}
#media (max-width: 600px) {
.dividing .col-xs-6 {
width:65%;
}
}
#media (max-width: 423px) {
.dividing .col-xs-6 {
width:55%;
}
}
You could use a :before element:
h2{
margin: auto;
margin-top: 2em;
text-align: right;
display: flex;
align-items: center;
color: #34495e;
padding-bottom: 1em;
}
h2:before{
content: '';
flex: 1 0 0;
margin-right: 0.25em;
height: 2px;
background: #34495e;
}
<h2>Test</h2>
I have a simple website that I am making for my music over at (secure tunnel) http://79a6b00f.ngrok.io using media queries and everything, with the meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">)in the header on index.html.
I have had someone test it on their phone, and the website zooms out, instead of maintaining scale and showing a hamburger menu. Here's my query code:
#media all and (max-width: 2600px) {
.w-ctrl {
width: 950px;
margin: auto;
}
}
#media all and (max-width: 966px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.sub-header {
width: 100%;
background: #37474F;
height: 500px
}
.lnd-con .pic {
height: 500px;
background-attachment: scroll;
}
.lnd-con .label-con {
top: -350px;
text-align: center;
}
.label-con .title {
font-size: 25px;
}
.label-con .subtitle {
font-size: 25px;
}
}
#media all and (max-width: 636px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.nav-con-big {
display: none;
}
.nav-con-small {
display: block;
}
.lnd-con .pic {
height: 300px;
}
.title-con {
display: none;
}
.lnd-con {
margin-top: 0px;
}
.lnd-con .label-con {
position: static;
text-align: left;
background: transparent;
padding-top: 5px;
padding-bottom: 8px;
letter-spacing: 0px;
}
.label-con .title {
font-size: 20px;
}
.label-con .subtitle {
font-size: 18px;
}
.sub-header {
width: 100%;
height: 400px
}
}
I could not fit my website into a js-fiddle, so I created a tunnel instead. I hope it's okay, as far as I am aware I'm not breaking any rules.
I see this declaration at the top of your global.css:
#viewport {
zoom: 1.0;
width: extend-to-zoom;
}
take it out or set width: device-width;:
#viewport {
width: device-width;
}
also, support for css device adaptation is pretty poor (http://caniuse.com/#search=%40viewport), possibly it is somehow conflicting with the meta tag implementation
You have to show us what meta viewport tag your using for #1. There are many.
But also; if you'd like to see the changes within your browser you can always write the media queries as between 2 widths as below:
/* SAMPLE No greater than 900px, no less than 400px */
#media (max-width:900px) and (min-width:400px) {
.CurrentlyOnVacation {
display:none;
}
}