Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Question: I would like to make my current code responsive so that it works for everyone such as mobile, tablets etc.. That is basically all I want to accomplish. The reason I want to make it responsive is so that it fits all of the different screen sizes for multiple devices. Additionally I wanted to know if there are any improvements that I could make to my code to increase efficiency or professionality.
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('email').value);
}
function myFunction() {
logOptions();
logEmail();
}
document.getElementById('inputform').addEventListener('submit', function(e) {
// e.preventDefault(); add this to log the email and select menu values to the browser console
logOptions();
logEmail();
});
/* styling for main body of webpage */
body {
background-color: #000639
}
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size: 24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
/* styling for h4 */
h4 {
color: #FFFFFF;
font-size: 20px;
font-family: Helvetica;
font-weight: lighter;
left: 350px;
position: fixed;
bottom: 445px;
}
/* styling for input field button */
input[type=email] {
font-size: 16px;
border-radius: 7px;
width: 315px;
height: 45px;
font-family: Helvetica;
font-weight: lighter;
position: fixed;
left: 350px;
bottom: 400px;
}
/* styling for sign up now submit button */
button {
background-color: #5c6ac4;
position: fixed;
left: 351px;
bottom: 320px;
width: 540px;
height: 55px;
border-radius: 7px;
font-family: Helvetica;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
/* styling for option menu */
select {
font-size: 16px;
width: 200px;
height: 50px;
font-family: Helvetica;
font-weight: lighter;
margin-left: 340px;
color: #7B7B7B;
position: fixed;
bottom: 400px;
}
/* styling for form */
form {
position: fixed;
left: 350px;
bottom: 420px;
}
/* styling for rectangle */
svg {
position: fixed;
bottom: 440px;
right: 628px;
}
/* styling for email placeholder */
input::placeholder {
color: #7B7B7B;
}
#thanks {
font-family: Helvetica;
font-weight: bold;
position: fixed;
bottom: 470px;
}
#tips {
font-family: Helvetica;
position: fixed;
bottom: 430px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<!-- <div class="input form"> -->
<form id="inputform" method="get" action="confirmation.html">
<input id="email" type="email" placeholder="Email Address" required>
<button type="submit" id="validate">Sign up now</button>
<select name="Interests" required>
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
making your code responsive will mean you will need to have some knowledge of css. To do this you could use media queries, for example
#media only screen and (max-width: 320px){
}
The code above means when the screens maximum width is 320px all your css code in the media query will be the active css code for your website.
so you could do something like this to your css code:
body {
background-color: #000639
}
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size:24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
#media only screen and (max-width: 320px){
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size:24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
}
So you will have to edit the css code for h2 under the media query to make sure each time the screen size reduces to that size all elements will auto adjust to fit the screen as you will design.
For more information about media queries visit Learn responsive design at https://www.codecademy.com here, you will find a course on responsive design i think that will give some insight.
If you want to fix any type of screen resolution, don't use px, use % instead.
I have learned how to create a website but forgot some of them.
Your question is difficult to answer since there are different points of view.
You could build responsive css and html manually and learn a lot of things. It is the best solution. You need to know media queries for example, and a huge amount of tricks.
You could use a framework that solve most important things, its a lazy solution. My advice is to use bootstrap but could be any other. I choose this because it's easy. Read the documentation and learn deeply how the grid system works. With this you'll be able to solve most common responsive problems.
If you don't want to learn anything, just think your code vertically, one column if possible, avoid fixing widths, etc. It's not impossible.
Related
Hi I'm trying to build a div popup so when a users screen is below a certian (number px) it popups up saying this is recommended for a PC or tablet please help. I'm good at html, css, but i'm not good at JS/JavaScript.
Here is my DIV:
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
Here is my CSS for the DIV:
.alert {
padding: 10px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
border-radius: 5px;
}
.closebtn {
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
line-height: 15px;
font-size: 20px;
cursor: pointer;
transition: 0.3s;
background-color: white;
border-radius: 20px;
height: 13px;
}
.closebtn:hover {
color: darkred;
}
Please don't dislike this page, But other than that please help me I'm very bad at JavaScript.
I tried looking up so many solutions but found none, but I know there is a solution and I'm expecting a code that gets the job done note again that I want a div not to show unless the screen size is below a certian px number. Thank you.
It's fairly straightforward using media queries. Some info on w3Schools here.
.alert {
display: none; /* at >600px width, don't display this */
/* set the css up below so when we do display it, it appears correctly */
position: fixed; /* position this fixed to the viewport */
inset: 0; /* and make it expand to the top, bottom, left and right edges */
background-color: rgba(255,255, 255, 0.9); /* apply a background to it to fade the contents out a bit using an opacity of 0.9 */
}
#media screen and (max-width: 600px) { /* apply this when the screen is less than or equal to 600 px wide */
.alert {
display: grid; /* use grid ... */
place-items: center; /* .. to put the message in the center of the screen */
}
}
<div class="alert">
<div class='alert-message'> <!-- added this to contain the message details so they appear together -->
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
</div>
<main>
<h1>This is a title</h1>
<p>This is some text</p>
</main>
I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.
I have a problem with the size of the google maps map.
What I would like is to have 100% width of the map and div paragraph. See image:
It works on computers as you can see. But it's not responsive width, and that is the problem.
CSS:
#map_canvas { // the map
height:600px;width:800px;
}
.google_map {
position:relative;
float: left;
}
.paragraph { // text and stuff on the right
float: left;
padding-left:5px;
display: inline;
}
HTML
<div class="google_map">
<div id="panel">
<div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>
<div id="map_canvas"></div>
</div>
<div class="paragraph">
blablabla
</div>
If I change the width of map_canvas to 100% the result is ~100 px.
I tried to create a div that holds both map_canvas and paragraph with the width 100% and then to set width of the map to XX% but that again got interpreted as xx px.
Because the map is 800 px wide it becomes very hard to use on mobiles, I have no problem with map_canvas comes above paragraph on mobiles if that is a solution.
In short I need on computers the width to be say 800px and on mobiles 100%.
EDIT:
#map_canvas {
width:100%;
min-height:600px;
}
Becomes:
EDIT:
CSS panel
#panel {
position: absolute;
top: 10px;
left: 65%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}
#panel2 {
position: absolute;
top: 10px;
left: 73%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel2, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel2 select, #panel2 input, .panel select, .panel input {
font-size: 15px;
}
#panel2 select, .panel select {
width: 100%;
}
#panel2 i, .panel i {
font-size: 12px;
}
Panel is the button you see on the image, Panel2 is a button that appears when you click once on the map, positioned to the right of the first button.
Try this:
#map_canvas {
width:100%;
min-height:600px;
}
Hope this help.
You could use CSS3 #media tags in your CSS. Including those you are able to set the width of your map according to the screen size of the device. Take a closer look to this site if you want to determine which device is used. You can define specific rules after which certain parts of your CSS are included or not, depending on the conditions you define in your file. After including this your css file could look like this:
#media (max-width: 800px) {
#map_canvas{
/*youre custom style for devices which have a maximum
screen size of 800px and therefore
can not display your map correctly*/
}
}
You can read more about this topic at this site.
Note that you can also include media tags in your <link> tag like this:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />
For more information you should take a closer look on this site.
Another way to determine which device is used is to use jQuery, JavaScript or PHP. Since current mobile device browsers should be able to use CSS3 I would recommend to use the media tags.
I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)
I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}
I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.
I am trying to overlap an image in front of a HTML element, so that I can simulate having a different arrow icon. I successfully achieved that, however even though I am able to click on the "text" area of the selector, obviously nothing happens if I click on top of the custom image (since it sits on top of the and is unrelated to it). I need to make it work for IE10 only, although I tried in Chrome and doesn't work either.
I did some research and seems like attaching some JS to the image to open the selector options is hard, if not impossible, specially for IE. As a separate effort, I tried setting a lower z-index for the image node, so that the mouse click event would ignore the image and go straight to the node, but didn't work. I wanted to check if anybody would have another idea, or if it's actually impossible to achieve.
Here is the fiddle for my code. For simplicity, I have replaced the image URL for just background-color: red
Fiddle
Here is the full code:
<style type="text/css">
.styled-select {
width: 240px;
overflow: hidden;
position: relative;
}
.styled-select select {
width: 268px;
z-index: 5;
background-color: transparent;
}
.imageNode {
background-color: red;
position: absolute;
right: 0px;
top: 2px;
height: 32px;
width: 32px;
overflow: hidden;
z-index: 3;
}
</style>
<div class="styled-select">
<select>
<option>Here is the first option!!!!!!!!!!</option>
<option>The second option</option>
<option>Third option!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</option>
</select>
<div class="imageNode"></div>
</div>
You can do it by CSS :after pseudo element
html
<div class="custom-select">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
css
div.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼"; /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}