<div class="slid-info">
<div class="item-logo">
<img src="img/nlogo.png" class="img-responsive" alt="nike"/>
</div>
<div class="carousel-caption">
all model
</div>
</div>
this is a element where i have image-logo this image dont work on responsive plz help me what wrong
I agree with TRiNE I think you need to supply some code either in codepen or plunker etc otherwise people are quite restricted. With that said, I've just tried a dummy test in codepen and the img-responsive utility class works as expected there, in the sense that the image I tested with this class had been styled as expected.
Looking at your screenshot, though, and I'm clutching at straws here based the information you have provided, but is it possible that the styles you have applied to the parent div .item-logo are conflicting here? You are also applying the same styles from .img-responsive to your logo image on line 174 of styles.css - was this to prove that the utility class was not working for you?
Sorry if this isn't the answer your looking for, but if you can supply an example as suggested previously then I'd be happy to look again :)
Related
enter image description hereI need to remove a picture (using css) if a device visits that is a mobile user. I’ve tried media queries with the display:none and many other things And nothing. Maybe I’m just not using proper syntax or putting it in the right spot? Some help would be greatly appreciated. Thanks!
In the example you've posted, the stylesheet is targeting the class:
.post .sc_image img
but your code example only shows an image tag without the parent containers that have the .post .sc_image classes.
You'd expect to see the image inside some divs (etc) like this:
<div class="post">
<div class="sc_image">
<img />
</div>
</div>
For your example to work correctly, remove .post .sc_image out of your css.
However, I'd guess that these other classes are because your complete code has more to it than just the tag sitting by itself. With that in mind, I would assume that some other style within your application is overwriting the display:none property.
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I'm using Pure.css, and this is the code I have.
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
<h3 class="content-subhead">Title</h3>
<p>
Sample Text
</p>
<a class="pure-button pure-button-primary" href="#">Learn More</a>
</div>
I want this div to be centered when in small screen, so I tried is-center, but it centers everything regardless of screen size. I tried reading the guides but I couldn't find any info.
Any help would be greatly appreciated.
If you want CSS some behaviour to happen only for a certain screen size, your best bet is look at CSS Media Queries.
http://www.w3schools.com/css/css3_mediaqueries.asp
Pure.css is most likely using media queries behind the scene. If you couldn't find the right class for this behaviour in pure.css's docs, then you're probably going to need to make your own class that does this.
Here are some steps to get you started:
1. Learn css Media Queries
2. Find the is-center class CSS in the source code of Pure.css module
3. find the correct pixel cut-off for small screen by looking at the media queries in pure.css
4. apply the appropriate media query to the is-center class to create your new class
5. give this class an appropriate name, e.g. is-center-sm
I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
I didn't really know how to put it in words so here is what i actually need to create but have no idea how.
I'm using the latest version of bootstrap
This is the desired effect
https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0
and this is what I currently have
https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0
this is the markup
<div class="container">
<img class="img-responsive" src="logo.png">
<h1>The text</h1>
</div>
so what would you recommned the site has to be responsive and in terms of mobile version i think the best case sceneario would either be smaller font or stack it on top of each other.
Please help me I'm quite desperate.
It isn't completely clear what you are asking for, but I'll give it a try.
The first issue that I see is the that you aren't following proper bootstrap layout rules (see http://getbootstrap.com/css/#grid). Below is an example of how to do it. To keep items lined up horizontally, you need to have <div class='row'>. Below is what I think you are looking for.
<div class="container">
<div class='row'>
<div class='col-xs-3'>
<img class="img-responsive" src="http://www.xamalot.com/preview/png3/5e78c8d8-3f02-4e3c-9a3a-d95432c606e3" />
</div>
<div class='col-xs-9'>
<h1>The text</h1>
</div>
</div>
</div>
I have put together a working sample at http://jsbin.com/mafuxeyebu/1/edit?html,output
I'm not entirely sure what you're asking but you could try using a screenshot program to capture the desired header as an image then you would not have to build it.
To make an image responsive in bootstrap you can just use the responsive class:
<img class="responsive">
I just used awesome-screenshot to grab that as an image
right click> open image in new tab if you just want to use this image
Now You could use GIMP or Photoshop to edit in your logo/ slogan.
Obviously this is a work around, but then again im not even sure this is what you wanted.
Thanks