The homepage/index.html seems fair enough to launch as-is for the time being. But when I look at it from chrome on mobile, all the lettering is too small - particularly in the navbar - and my parallax effect doesn't work on mobile either.
I tried making changes to the scale within the viewport, but I honestly just don't know what I'm doing. I would be so grateful if someone could possibly take a look at the website on mobile (and desktop too, if you'd like) and maybe make some suggestions on a quick cheap fix for making it more readable while maintaining its look of 'prettiness'. And if you know how to keep the parallax intact on mobile that would be amazing too!
Here are the links to the website, and to the code on github:
https://ido-weddingsandevents.herokuapp.com/index.html
https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html
To make your navigation larger and your image titles on mobile you can try this CSS:
#media (max-width: 860px){
.navigation li a {
font-size: 80px;
}
.parallaxImage h2 {
font-size: 56px;
line-height: 94px;
}}
In Bootstrap you have to insert <div class="row">...</div> inside the class="container" . Better use a percentage in .navigation { width: 100%; max-width: 500px; } for mobile compatibility. Font-Awesome, PT Serif, and Delius Swash Caps are not used. Loading them is not good for performance.
If you are using #media, setup like this, for example
.navigation li a { font-size: 24px; }
#media (min-width: 768px) {
.navigation li a { font-size: 36px; }
}
#media (min-width: 992px) {
.navigation li a { font-size: 60px; }
}
#media (min-width: 1200px) {
.navigation li a { font-size: 72px; }
}
Important to use
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
i have a website done in html and css, I have used media query coz in mobile view one row in my website was showing wrong alignment, so id did the following code for mobile devices:
#media only screen and (max-width: 600px) {
#zayan {margin-left: -20%;}
#amir {margin-top: -20%; width: 100px;}
#amir h5 {font-size: 12px; margin-left: -40%;}
}
now I checked this in my redmi note 8 mobile and it was showing perfect, but when i checked it in my redmi 7 and another device its coming wrong,
can anyone please tell me what could be wrong here. thanks in advance
I've tried it on my devices and I hope this works for you
#media all and (max-width: 600px) {
#zayan {margin: auto; }
#amir h5 { font-size: 12px; }
#amir { margin-top: -20%; }
.card-body{ padding: 0px !important; }
}
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
I am trying to get text to be full width on a large device and then stacked on a mobile device with larger text.
I realize I can do something like displaying none for the large text if the browser is small and then setting three text blocks to col-12 for the small device, but that seems like a lot of html duplication. Is there a better way to solve this problem?
My code is below. I recognize I can override the font size with the bootstrap overrides for a small device. I just need help stacking the font.
I included a codepend here: http://codepen.io/anon/pen/pRQZdR
<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1>
#include media-breakpoint-up(sm) {
.title-text-md {
font-size: 20px;
}
}
Add this css this might do the trick.
#media (max-width: #screen-xs) {
h1{font-size: 30px;}
}
#media (max-width: #screen-sm) {
h1{font-size: 4px;}
}
#media (max-width: #screen-md) {
h1{font-size: 400px;}
}
#media (max-width: #screen-md) {
h1{font-size: 40px;}
}
h1{
font-size: 1.4em;
}
Hope this helps!
I have a wordpress site running an ET Divi child theme and on mobile the main menu does not scroll on touch, instead the background (website) scrolls. I've been trying several media queries and such to fix but cannot figure it out, anyone have thoughts or run into this before? Here is my child theme stylesheet add-on code:
the website is wptemp.thereverendmichael.com (make sure to adjust width for mobile viewing only)
#media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}
#media (max-width: 980px) {
.et_fixed_nav #top-header {
position:fixed !important;
}
#mobile-menu {
overflow-y:scroll!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
Sorry, I figured it out with a bit more playing. Here was the solution
EDIT: Future Divi versions have changed .et-mobile-menu to .et_mobile_menu just thought I'd give a heads up.
.et_mobile_menu {
overflow-y:scroll!important;
max-height:80vh!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
I am trying to make an adjustment to my H1 tags when the screen is at 480px width or less. Right now it's a very tall headline when viewed on mobile so I decided to add a custom #media to resolve this. Please ignore the actual CSS values as I am using drastic changes to make it obvious if the changes actually do happen.
In my CSS I tried:
#media screen and (max-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
}
And used this in my head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I've tried several variations of the viewport code, and several variations of the #media code. Including:
#media only screen and (min-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
and
#media only screen and (min-device-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
Etc. etc. I should mention I am using bootstrap and I am wondering if that could be causing some conflict? I have never tried to implement custom #media code with a CSS framework like bootstrap before so I am not sure of the rules here! When I view on my phone, or drag my browser as narrow as it'll get, nothing changes other than my H1 headline stacking up with the same huge font instead of getting smaller.
Any help would be greatly appreciated!
Your media queries look correct, make sure you have the media queries after your normal CSS, as it will always use the last set CSS style.