urgent help needed finding bug

**busso** · Feb 28th, 2018, 10:52 AM

ok so theres a lot of code but most of it is commented, heres the problem I'm having.

the main section has 2 containing elements, a div called slideshow which is just an image fader fading between 2 images, then there is a blockqoute with a heading and some text. so I'm designing for mobile first, naturally these two appear one after the other when i minimize the screen to a mobile device size, i scale up to a 500px width media query and only change he position and appearance of the nav links. in the 500px media query the slideshow and blockquote are one after the other vertically. that's what i want but the problem begins when i do a min width media query of 600 px. i want the two main elements to appear side by side, a certain amount of px from the left and right sides of the screen respectively. i change the elements to inline block and so the first element in the main behaves fine, right at the very left of the screen as defined in the rule, the problem is the blockquote, it appears slightly down from the top whereas the gallery is right below the footer with no space in between, also when i set px for the blockquote from the right side of the screen it doesn't behave at all, if i wanted to get it to the very edge i would have to set right: -whatever px. its as if its behaving if the screen is only 600px even though i declare min-width in the query. i cant see whats going wrong, i originally had the main as a flex box but it was behaving the same way so i thought id try it old school but its still not working.

ok so as i said theres a lot of code, but ill break it up

html before main section

**Web Design Forums** · Feb 28th, 2018 10:52 AM

**busso** · Feb 28th, 2018, 10:52 AM

<!doctype html>

<html lang="en">

<head>

<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> K22 jewellery </title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<header>

<h1> K22 <span id="h1jy">jewellery</span> </h1>

<img src="images/menuicon.svg" alt="menuicon" width="20" id="menuicon" />
<img src="images/shopping-cart.svg" alt="cart" width="20" id="carticon" />

<a href="#" id="login">Login | Signup</a>

<nav>
<ul id="navlink">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="b-orders.html">bespoke orders</a></li>
<li><a href="shop.html">shop</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
</nav>
</header>

main section html

<main id="mobile-content">

<div id="slideshow">

<section>

<img src="images/img1.png" alt="quality design affordable price" width="260">
</section>

<section>
<img src="images/img2.png" alt="made to order" width="260">
</section>
</div>

<blockquote>
<h1>Quality craftsmanship</h1>
<p>K22 jewelley makers incorporate ancient Greek jewellery making techniques in every aspect of the manufacturing
process to ensure your piece is completely unique and steeping in Greek culture.</p>
</blockquote>
</main>

html after main

<footer>

<a href="#" class="fa">Sizes</a>
<a href="#" class="fa">Gift certificates</a>
<a href="#" class="fa">Shipping and returns</a>
<a href="#" class="fa">Privacy policy</a>

<div id="flex">
<a href="#" class="icon">
<img src="images/facebook.png" alt="facebook logo">
</a>
<a href="#" class="icon">
<img src="images/twitter.png" alt="twitter logo">
</a>
<a href="#" class="icon">
<img src="images/linkedin.png" alt="linkedin logo">
</a>
</div>
</footer>




<script src="javascript/mobilemenu.js"></script>

<script src="javascript/fade.js"></script>
</body>

</html>

**busso** · Feb 28th, 2018, 10:53 AM

css before main section

/* ************************************************** ************************************************** ************************ */
/* CSS RESET */
/* ************************************************** ************************************************** ************************ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ************************************************** ************************************************** ************************* */
/* BEGIN STYLESHEET---- MOBILE FIRST */
/* ************************************************** ************************************************** ************************* */
/* body styles */
body {
/* position to relative in case i need to absolutely position elements throughtout the page, margin to 0 auto, width to 100% */
position: relative;
margin: 0 auto;
width: 100%;

/* fancy site, fancy background image repeated on the x and y axis */
background-color: rgb(220,220,220);
/* default font family and base style of 16px so i can use em later, k22 heading will use font from google fonts */
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}

/* header */
header {
background-color: rgb(60,0,40);
width: 100%;
min-height: 150px;
}
/* main h1 heading within header */
header h1 {
text-align: center;
/* width of h1 and margin to center */
width: 80%;
margin: 0 auto;
/* font family of dancing script from google fonts */
font-family: dancing script;
/* larger font size and bold weight to give the header more volume */
font-size: 2.5em;
font-weight: bold;
/* my attempt at a gold color for the k22 part of the header */
color: rgb(255,220,115);
/* letter spacing to spread things out */
letter-spacing: 2px;
/* padding */
padding: 1em .2em .4em .2em;
/* bottom border as underline */
border-bottom: 2px solid black;
}

/* id points to a span within the main header for the word jewellery */
#h1jy {
/* my attempt at a silver color */
color: rgb(192,192,192);
}

/* menu icon positioning styles */
#menuicon {
position: absolute;
top: 0px;
left: 0px;
padding: .6em;
}

/* shopping cart positioning styles */
#carticon {
position: absolute;
top: 0px;
right: 0px;
padding: .6em;
}

/* positioning for login and signup button and also styling */

#login {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 10px;
width: 120px;
text-decoration: none;
color: rgb(150,150,150);
letter-spacing: 2px;
font-size: .8em;
}

/* navigation list initially set to display none, setting of position to relative */
header nav ul {
position: relative;
display: none;
background-color: rgba(10,10,10, .8);
width: 100%;
}

/* styles for the individual li elements */
header nav ul li {
text-align: center;
width: 100%;
padding: .2em;
}

/* removing default styles for anchor links adding colour size and line height */
header nav ul li a {
text-decoration: none;
color: rgb(150,150,150);
letter-spacing: 2px;
font-size: 1em;
text-shadow: 0px 0px 5px rgb(150,150,150);
}

header nav ul li a:hover {
color: white;
text-shadow: 0px 0px 5px white;
}

main section css

/* just some basic settings for main section */
#mobile-content {
margin: 0 auto;
width: 100%;
}
/* set position to relative to allow the absolute positioning of the section for fader other than that are the usual declarations*/
#slideshow {
position: relative;
margin: 0 auto;
display: block;
height: 265px;
}

/* position set to absolute to allow the fader to work, left and right set to 0 to allow centering along with margin aout */
#slideshow > section {
position: absolute;
left: 0;
right: 0;
margin: auto;
}

/* centering image and giving some space between top and bottom also set max width */
#mobile-content section img {
display: block;
margin: 0 auto;
max-width: 300px;
}

/* blockqoute centered colored both text and background added padding and max width */
#mobile-content blockquote {
margin: 0 auto;
text-align: center;
color: rgb(200,200,200);
letter-spacing: 2px;
line-height: 1.2em;
background-color: rgb(100, 100, 100);
padding: .5em;
max-width: 245px;
}

#mobile-content blockquote h1 {
font-family: dancing script;
font-size: 1.8em;
line-height:1.2em;
color: rgb(255,220,115);
}

css for footer

/* footer with slightly darker background, centered and some padding to give buffer between content and edges */
footer {
position: relative;
margin: 0 auto;
padding: 1em
width: 100%;
background-color: rgb(160,160,160);
}

/* styling the anchor links, some padding font color, the usual */
.fa {
text-decoration: none;
display: block;
margin: 0 auto;
padding: .5em;
text-align: center;
color: rgb(60,0,40);
letter-spacing: 2px;
font-size: .8em;
}

/* finally using flex box, this is for the 3 social media icons */
#flex {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}

500px media query

@media screen and (min-width: 500px){

/* first things first, remove the menu icon */
#menuicon {
display: none;
}

/* next modify the nav ul to display below the heading */
header nav ul {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
background: none;
margin-top: .4em;
}

header nav ul li a{
font-size: .6em;
}

}

media query for 600px min

@media screen and (min-width: 600px){

#mobile-content {
width: 100%;
background-color: white;
}

#slideshow {
position: relative;
display: inline-block;
width: 245px;
margin: 0 auto;
}

#mobile-content blockquote {
position: relative;
display: inline-block;
width: 245px;
right: 0px;
}

}

**busso** · Feb 28th, 2018, 10:54 AM

i didn't leave out any code just had to break it up to be easier to follow

a speedy reply is massively appreciated as the assignment is already late :/

thanks guys

**mlseim** · Feb 28th, 2018, 01:35 PM

First of all .... Jewellery is spelled: Jewelry

I don't just want to throw out a lame answer, but I think your problem lies with two things:
1) The order of the media rules
2) The misconception of min and max width.

This is a lot of reading, but it explains it way better than I can:
https://www.emailonacid.com/blog/art..._and_max-width

Thread: urgent help needed finding bug

LinkBack

Thread Tools

Search Thread

Display