I have a resposive site which works fine on desktop and mobile version but on Tablet version, text and images are not in appropriate places and move towards right side making it non-responsive.
You can check the link here for screenshot:
https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
This is my website: http://www.sociolife.co.in/
PS: When site is opened at full browser width in desktop, this problem wont occur but when you try to decrease the browser width search bar and subscription box is moving towards right.
Please can you tell me if there is any CSS problem or is there any javascript problem and how can I fix it?
Your meta viewport is wrong. You should use something like this :
<meta name="viewport" content="width=device-width, initial-scale=1">
You can check out this : https://css-tricks.com/snippets/html/responsive-meta-tag/
Edit : I thought you meant your website wouldn't work in tablet / mobile view. Looking at the code, the width for #main-nav and probably the other few elements are still fixed at 1000px in the 'tablet view'. I think there's something wrong in your media queries.
Edit 2 : Based on your CSS, here's some relevant code (I'm taking #main-nav as example, you can check for other affected elements) :
#media only screen and (max-width: 1028px){
#main-nav{
width:1000px;
}
}
#media only screen and (max-width: 725px){
#main-nav{
width:430px;
}
}
Do you see the problem now? You're making the navigation 1000px wide for screen sizes between 726px and 1028px. You should have used width:100% or width:725px for your #main-nav's 'tablet version'. Now you just need to apply the same principle and check for other areas of your website which have the same problem.
Change in your html file:
At line 1195 of your source code change wiz.
#main-nav {
width: 1000px;
}
change it to:
#main-nav {
width: 103%;
}
At line 1201:
.column-right-outer{
width:320px;
float:left;
}
to the below code:
.column-right-outer{
display: none;
}
At line 1204 change this:
.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}
to this:
.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}
edit- 27/04/15
delete the following lines at line 1208:
#menu-main {
display: none;
}
Add the below lines of code in a separate <style></style> tag in your HTML file.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}
Now your site will look much better. :)
This works well.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}
Related
I'm trying to make a navigation button for my website that only appears when the site's at a certain size. It disappears and reappears when needed, but does a slide-in and -out animation that I definitely didn't code, and also lingers for ~0.5 seconds before disappearing. The nav button is also connected to simple Javascript that's supposed to bring up a pop-up overlay menu. I'm trying to get rid of both the resizing animation and the lingering 0.5 seconds.
The HTML for the button:
<button id="navbutton" onclick="openNav()">nav</button>
The CSS relating to the navbutton (note: everything I know about coding a website, I learned within the past 24 hours - if the code looks messy, that's because I don't know what I'm doing):
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
}
#navbutton:hover {
background-color: #545454;
transition-duration: 0.4s;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
The Javascript that connects to the overlay menu (the "navigation" div and "closeNav" button aren't linked here; I don't think the .js has anything to do with the unwarranted navbutton animations, but I'm adding it anyway in case it does):
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
Also, the nav button currently doesn't do anything when I click it, despite it working a couple hours ago. I probably accidentally removed a detrimental piece of code, but that's not the point of this question - I'll figure it out/ask in another post. But if anything seems out of the ordinary, feel free to point it out.
I tried putting an extra float: right; after the navbutton turns visible, even though I know logically it doesn't do anything since it's already in the class (but a guy's desperate). I've also tried position: absolute; (and relative), because I thought "maybe this will make it stay in place and not move," but the animation is still there. I also tried deleting the transition-duration, but it didn't work.
To whoever can offer insight: I will owe you my firstborn. Thanks.
If you don't specify a transition-property value, the default value is all, which means that all properties that have a different value before and after the transition will be animated. However, if you explicitly set a transition-property value, only the specified properties will be animated. So I think this is your problem.Try setting the transition properties to only background-color and color.
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
transition-property: background-color, color;
transition-duration: 0.4s;
}
#navbutton:hover {
background-color: #545454;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
<button id="navbutton" onclick="openNav()">nav</button>
I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.
Here is an image of how it looks when window is maximized:
Here is an image when the window is resized:
Here is an image of what I want the page to look and function like:
Issues:
As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
When menuis clicked, I want the nav to dynamically display the other links.
Here is what I have tried so far: https://jsfiddle.net/hudnybux/
Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.
<div id="header-main">
<div id="nav-trigger"><span>Menu</span></div>
<nav id="main-navigation" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
<!--<nav id="nav-mobile"></nav>-->
</div>
Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0.
width: 0;
height: 0;
Edit:
I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp. You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.
https://jsfiddle.net/qnco3x7e/8/
You will need to add another media query
#media all and (max-width: 460px) {
nav#main-navigation li {
display:block;
border-bottom: 1px solid #fafafa;
}
}
You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!
The Strategy
Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
Show everything by default; use display: none only on screen sizes you don't want to show something on.
JSFiddle
$(document).ready(function() {
$("#main-nav-mobile-trigger span").click(function() {
$(this).toggleClass("open");
if ($(this).hasClass("open")) {
$("#main-nav").addClass("open").slideDown(250);
} else {
$("#main-nav").removeClass("open").slideUp(250);
}
});
});
.pageOverlay {
width: 900px;
margin: 0 auto;
}
/******************/
nav {
background-color: #fefefe;
/*NAV COLOUR*/
padding: 10px 0;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
nav ul li a {
color: #a4a4a5;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
padding: 0 2px;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: white;
padding: 10px 20px;
}
/****************************************************************/
/* Menu CSS which pops up when window is resized */
#main-nav-mobile-trigger {
text-align: center;
}
#main-nav-mobile-trigger span {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
text-transform: uppercase;
}
#main-nav-mobile-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #e3e3e3;
border-right: solid 10px transparent;
}
#main-nav-mobile-trigger span:hover {
background-color: #e3e3e3;
}
#main-nav-mobile-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent;
}
#media all and (min-width: 901px) {
#top-nav {
text-align: right;
}
#main-nav {
text-align: left;
}
#main-nav-mobile-trigger {
display: none;
}
}
#media all and (max-width: 900px) {
#main-nav:not(.open) {
display: none;
}
#main-nav ul {
display: block;
}
#main-nav li {
display: block;
border-bottom: solid 1px #e3e3e3;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav a {
padding: 10px 30px;
}
#main-nav a:hover {
background-color: #e3e3e3;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
<nav id="top-nav" role="navigation">
<ul>
<li>Join / Log In</li>
<li>Help</li>
<li>Shop</li>
</ul>
</nav>
<div id="main-nav-mobile-trigger"><span>Menu</span></div>
<nav id="main-nav" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
</div>
<!-- pageOverlay closed-->
The HTML
I removed your container <div>s (#header and #header-main), as they serve no purpose as far as layout is concerned.
There are now only three parts to the header area. In order they are:
#top-nav - Join/Login, Help, Shop
#main-nav-mobile-trigger - MENU button
#main-nav - Stretches, Mobility, Posture
The JavaScript
When the MENU button (#main-nav-mobile-trigger span) is clicked:
Toggle its .open class.
If it has the .open class,
Add #main-nav's .open class.
Otherwise,
Remove #main-nav's .open class.
The CSS
You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation, which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav. Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
For big screen widths (#media all and (min-width: 901px)):
Align #top-nav to the right and #main-nav to the left.
Hide the MENU button.
For small screen widths (#media all and (max-width: 900px)):
If #main-nav doesn't have the .open class, hide it.
Display the menu items in #main-nav horizontally.
I hope this helps you. Best of luck with your future adventures in front-end development!
I am editing a data-driven website that uses data from an automation database engine. Inside the HTML, I have a fixed size button and within that are texts that come from the database. I want to add some css styles that would resize the font so that it always fits inside the div button.
Here is my code:
CSS:
.button {
width: 216px;
height: 44px;
background-color: 00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
line-height: 45px;
font-weight: 500;
text-align: center;
#media screen and (max-width : 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 40px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
}
HTML
<div class="button">View Your Plan</div> (static/not data-driven)
<div class="button">Current Members Click Here</div> (data-driven)
<div class="button">Enroll Now</div> (static/not data-driven)
The second/middle button is a data driven button. Sometimes, the words will be longer than "Current Members Click Here". Sometimes, it will be "See Your Plan Discount Program Here". The problem is if take out the font-size and line-height, it will default the font-size, which makes it small. How do I fix this so that the dynamic text will always fit inside the div button whether it is short or long? Can it be done with just CSS or is there a JS solution?
Here is what it looks like now:
Desktop View
Mobile View
Goal:
Desktop
Mobile
EDIT:
I just read a comment that you want that data-driven button to have a smaller font than the others. Just specify it in the class I used for that button, setting a smaller vw in your font-size.
This is possible using VW units, you will need to support older browsers with a fallback though. I don't know if this breaks in larger desktops but hopefully you can get an idea of this approach.
.button {
width: 216px;
min-height: 44px;
background-color: #00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
font-size: 2vw;
font-weight: 500;
text-align: center;
line-height: 44px;
}
.button.data-driven {
line-height: 22px;
}
#media (max-width: 992px) and (min-width: 768px) {
.button {
font-size: 23px;
font-size: 2vw;
}
.button.data-driven {
line-height: initial;
}
}
#media screen and (max-width: 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 81px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
padding-top: 0;
}
.button.data-driven {
line-height: 81px;
}
}
<div class="button">View Your Plan</div>(static/not data-driven)
<div class="button data-driven">Current Members Click Here</div>(data-driven)
<div class="button">Enroll Now</div>(static/not data-driven)
What you're after is a dynamic font size that scales to fit, and you can't do that with just CSS. You can apply different classes conditionally which could affect the font size. For instance:
.button.small-text {
font-size:12px;
}
.button.medium-text {
font-size:18px;
}
.button.large-text {
font-size:23px;
}
You would need to redefine these in your media queries to fit the different button widths.
Then you have to either use backend or frontend script to apply small-text, medium-text or large-text.
With jQuery this might look like:
$('.button').removeClass('small-text medium-text large-text');
$('.button').each(function() {
var len = $(this).text().length;
if (len < 20) {
$(this).addClass('large-text');
} else if (len < 40) {
$(this).addClass('medium-text');
} else {
$(this).addClass('small-text');
}
});
All you have to do is to remove the height to the button to make it dynamic. So the button will grow as the text increases. and do add a display:inline-block to the button class.
If you need to make the button with fixed/constant height, use a % value in the font-size of the button.
like font-size:10%; as % denotes a relative value, you could use that.
I have made this Website just as a little something to do. I have been trying different methods to get it to be 100% Compatible with all devices, and to fit perfectly in the each device.
I don't know anything about #media queries, nor javascript. So I am quite blank on what option I have.
This is the code I am currently using, but I still need to scroll to right to see the whole page:
<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" href="/script/jquery.mobile-1.4.3.css">
<script type="text/javascript" src="/script/jquery.mobile-1.4.3.js"></script>
I am not really HTML savvy, just mess around with it, and try to create things.
The next solution that I know I could do is just make my images smaller. However by doing this, I obviously won't get the appearance I am particularly after.
Another thing is, how would I get my 'Back To Top' button be in the center of each page, and on all devices?
Javascript:
<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Body Code:
<p style="text-align:center">
Back to Top
CSS:
.back-to-top {
position: fixed;
bottom: 0px;
right: 44%;
text-decoration: none;
color: transparent;
background-color: rgba(0, 230, 0, 0.10);
font-size: 13px;
padding: 1em;
display: none;
border: 1px solid #CCFF33;
border-radius: 4px;
box-shadow: 0 0 8px 1px #00E600;
color: #C1C1C1;
outline: none;
height: 10px;
width: 180px;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
text-align: center;
}
.back-to-top:hover {
background-color: rgba(255, 0, 0, 0.10);
}
This is the basics of media queries
You start with designing everything for mobile first in this example and work your way down, changing attributes your each screen size.
/* Mobile Layout: 480px and below. */
exampleDiv {
Width:60%;
height:100px;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
exampleDiv {
Width:60% height:300px;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
exampleDiv {
Width:100% height:500px;
}
}
I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
Seen as someone asked for the script:
function resizeWindow(){var a=getWindowHeight();document.getElementById("content").style.height=(a-0)+"px";document.getElementById("nav").style.height=(a-0)+"px";document.getElementById("contentPanel").style.height=(a-10)+"px"}function getWindowHeight(){var a=0;if(typeof(window.innerHeight)=="number"){a=window.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){a=document.documentElement.clientHeight}else{if(document.body&&document.body.clientHeight){a=document.body.clientHeight}}}return a};
Changed the script to refer to min-height works perfectly in FireFox. But not IE or Chrome.
CSS:
body {
margin: 0px;
text-align: left;
font-family: Verdana;
font-size: 11px;
background-color: #FFFFFF;
min-width: 980px;
min-height: 10px;
background-image: url('../Images/watermark.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
.nav {
width: 19%;
margin: 0px 0px 0px 0px;
background-color: #E0EFFF;
float: left;
vertical-align: bottom;
position: relative;
}
some minor changes to my script / using min height seems to work. And after running a CCLEAN IE sort of does what I wanted.
Instead of setting the "height", set the "min-height".
short solution is give height auto to both divs