I have an HTML website in which I am trying to hide a div containing images in mobile view.
#media screen and (max-width: 600px) {
#kingg { display: none !important; }
}
<div id="kingg" class="grid-uniform section-four" >
<div class="container">
<div class="main-title">
<div class="hometab-heading box-heading">ABOUT US</div>
<div class="title-sep"></div>
</div>
<div class="grid__item ">
<div class="grid__item wide--two-thirds post-large--two-thirds large--two-thirds">
<p>Anvi Jewellers founded by <b>Lavanya Ghulekar</b> in 2017 is a by-product of the passion for creativity of a home maker. Our vision is to build trust with high ethical standards, fair pricing and added value to our customers. We have made it our mission to strive every day to earn the confidence and trust of our clients by meeting and exceeding expectations of quality, service, and unsurpassed value. We expertise in all types of designer light-weight kundan, antique, c-zet, pearl jewellery etc. We make gold ornaments in 20 carat and 22 carat. Anvi Jewellers was founded with a refreshing and courageous objective to make beautiful jewellery accessible, affordable and forever. After 2 years of happy clients, Anvi Jewellers has finally launched online. Anvi provides our clients with more than they imagined and less than they anticipated.</p>
<div class="invisible-medium"></div>
<div style="margin-top:52px;" class="grid__item ">
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="see" src="images\a1.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seep" src="images\a11.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seel" src="images\a3.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
</div>
</div>
Now the problem is, it is working in localhost but when I uploaded it to server it is not hiding the div. Here is my website link website.
Can anyone tell me what could be the problem, please?
After going through your source code online, this is what you actually have, inline:
<style>
#media screen and (max-width: 600px) {
#kingg img { display: none !important; }
}
</style>
This is working as expected, hiding the image in that div.
So the code you posted is bound to work, as it doesn't seem to have any syntax errors or anything.
So i would say to make sure you are uploading the file you are editing or edit the file in the server directly.
use correct id or class. Use the code below to hide text.
.grid__item p:nth-child(1) {
display: none;
}
Related
My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.
Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}
.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image
I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!
<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation"> </h5>
</div>
Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.
So I have this code:
<ul class="acc-list list-inline">
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
</ul>
With Bootstrap and some additional CSS, this code is essentially producing a list of 3 images horizontally across the page. The images are nothing special and as I'm using bootstrap they reposition themselves when resizing the window slightly. If I resize my window to represent something similar to a mobile phone screen for example, because of my styling and bootstrap the list simple shows all 3 images on top of each other vertically.
Great you may think, but what I want to do in this scenario is actually use some sort of jQuery slider gallery instead. Instead of the images lining up vertically on top of each other in a smartphone size window, I would like them to go away and come back as a slider gallery.
I have tried, but admittedly I really suck at jQuery/JS, so I'm wandering if anyone can point me towards a good example of this or can help with some coding. I've looked around on the internet but I only seem to come across examples of the slider resizing with the window.
However, what I want to do is completely get rid of my list code and throw these images into an entirely new slider gallery when the window is very small.
May I offer a different approach. Using a simple horizontal scroll - you can find some nice customizable scrollbars out there to make it look a little more fancy. Since it includes images, I didn't do a jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
width:100%;
}
#hold
{
width:90%;
height:300px;
overflow-x:auto;
overflow-y:hidden;
}
#image_container
{
width:920px; /* equal to total width of all images */
min-width:480px; /* minimum for device size */
}
#image_container li
{
display:inline;
width:300px;
height:100%;
margin:2px;
}
#image_container li img
{
width:300px;
}
</style>
</head>
<body>
<div id="hold">
<ul id="image_container">
<li><img src="../images/slides/bridge.jpg"></li>
<li><img src="../images/slides/road.jpg"></li>
<li><img src="../images/slides/leaf.jpg"></li>
</ul>
</div>
</body>
</html>
I have a question about a project i'm working on.
The website is www.AC-photography.net
When opened in Firefox, the "start scrolling" can be clicked on but when opened in chrome it seems that there is something in front of this layer. Can someone assist on how to make this work in chrome. I will post the html concerning
<div id="main">
<header id="top">
<div class="color_bar"></div>
</header>
<div class="title">
<div class="logo">
<img src="images/logo.png" alt="" />
<!-- <p class="intro_text"> Alex Cherkasov | Art Director </p>-->
<p class="sub_intro">Start Scrolling</p>
</div>
</div>
The direct problem seems to be z-index: auto on your .title class - set this higher than 800, and it should be fine in Chrome.
That aside, you could also do with cleaning up syntax - a paragraph inside an anchor (block level inside inline), with the second not actually defined as block, is asking for trouble!
It looks like it's missing a closing </div> tag. That might be the problem.
I have
<div class='line'>
<div class='chord_line'>
<span class='chord_block'></span>
<span class='chord_block'>E</span>
<span class='chord_block'>B</span>
<span class='chord_block'>C#m</span>
<span class='chord_block'>A</span>
</div>
<div class='lyric_line'>
<span class='lyric_block'></span>
<span class='lyric_block'>Just a</span>
<span class='lyric_block'>small-town girl</span>
<span class='lyric_block'>living in a</span>
<span class='lyric_block'>lonely world</span>
</div>
</div>
(Excuse me for not being too familiar with proper css conventions for when to use div/spans)
I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:
E B C#m A
Just a small-town girl living in a lonely world
(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)
I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.
Some things I cannot use:
I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.
If this is possible, what div/span attributes should I be using? Can you provide sample css?
If this is not possible, can it be done with javascript?
EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.
Original Attempt... ---> CSS Tables Demonstration
div.line {
display:table;
}
div.line > div {
display:table-row;
}
div.line > div span {
display:table-cell;
vertical-align:middle;
}
For empty blocks, place html entity for non-breaking space as their contents. This should do what you want, if not, then I may have misunderstood.
SPECIAL NOTE: Compatibility for display:table-* is limited. More information
NEW EXAMPLE: Quite sure this is what you are looking for. --->
Demonstration
CSS
.block {
margin-top:1.5em;
position:relative;
display:inline-block;
}
.block .chord {
font-weight:bold;
font-size:0.8em;
position:absolute;
top:-1em;
}
HTML
<div class="block">
<div class="chord"></div>
<div class="lyric"></div>
</div>
<div class="block">
<div class="chord">E</div>
<div class="lyric">Just a</div>
</div>
<div class="block">
<div class="chord">B</div>
<div class="lyric">small-town girl</div>
</div>
<div class="block">
<div class="chord">C#m</div>
<div class="lyric">living in a</div>
</div>
<div class="block">
<div class="chord">A</div>
<div class="lyric">lonely world</div>
</div>
It looks interesting to me so I just searched over it and find following article that is discussing similar problem:
Create a table using CSS
I checked it here:
http://jsfiddle.net/MdzDp/
I think you need to use DIVs and SPANs instead of ULs and LIs here.
A similar question was asked once, and the only workable solution was indeed a combined "chords and lyrics" block (with the chords having a combination of position: absolute and position: relative). It's the only way I can think of if you want this to work reliably and in edge cases like different font sizes and so on.
JSFiddle example
Now this doesn't do exactly what you need: It doesn't allow continuous selection of lyrics. But I can think of two general directions to extend it.
A) Chords as background images: If the Chord symbols
C# E# Em Am
could be background images instead of actual text, you could use my code example and give the chord_block class a background-image of whatever Chord is in question. The image would have to contain the Chord (e.g. Em) as text. The upside is that this keeps the "lyrics line" intact. The downside is that this is not accessible, not resizable, and possibly problematic in print because many browsers don't show background images when printing.
B) Using jQuery: Using the approach shown in the JSFiddle, you have elements of the class chord_block that are already in the correct position. It should be half-way easy to use jQuery to create a new element on the fly, and add it to the document at the x/y position of each chord_block but outside the line, so you can still select the whole lyrics line without interference.
here's a crappy way to do it... i'd try more, but christmas dinner is served :)
<head>
<style type="text/css">
div.line {width:100%;}
div.line div.chord_line div.chord_block, div.line div.lyric_line div.lyric_block {width:20%; float:left;}
div.lyric_line {clear:left;}
</style>
</head>
<body>
<div class='line'>
<div class='chord_line'>
<div class='chord_block'>...</div>
<div class='chord_block'>E</div>
<div class='chord_block'>B</div>
<div class='chord_block'>C#m</div>
<div class='chord_block'>A</div>
</div>
<div class='lyric_line'>
<div class='lyric_block'>...</div>
<div class='lyric_block'>Just a</div>
<div class='lyric_block'>small-town girl</div>
<div class='lyric_block'>living in a</div>
<div class='lyric_block'>lonely world</div>
</div>
</div>
</body>
EDIT:
if you're open to structural changes, here you go:
<head>
<style type="text/css">
#chord_block {float:left; padding:2px; text-align:left;}
</style>
</head>
<body>
<div id="chord_block">
<div id="chord"></div>
<div id="lyric"></div>
</div>
<div id="chord_block">
<div id="chord">E</div>
<div id="lyric">Just a</div>
</div>
<div id="chord_block">
<div id="chord">B</div>
<div id="lyric">small-town girl</div>
</div>
<div id="chord_block">
<div id="chord">C#m</div>
<div id="lyric">living in a</div>
</div>
<div id="chord_block">
<div id="chord">A</div>
<div id="lyric">lonely world</div>
</div>
</body>
let the down-voting begin ...
as much as I love css, sometimes tables are worth using.
let me clarify, if you can pull it off with css and div's, it's all good; but if you have to spend hours trying to figure the simplest (with tables) layout out -- I think you're wasting your (and your client's) time and money.