i try this code to display responsive image in my post in wordpress using bootstrap but image doesnot respond to bootstrap effect..i actually include all bootstrap files in my theme directory just fine
<article class="media">
<h2>About the venue</h2>
<img class="pull-left img-responsive" src="wp-content/themes/mytheme/images/hotels/contempo.jpg" alt="Hotel Contempo"/>
<p>All CAC speaking events located at 309 1st Avenue, in Downtown Seattle..</p>
</article>
does this method work fine or there is something wrong??if not..is there other ideas???
The issue is that img-responsive is designed to scale to the parent element. Your parent element is just "media", which isn't a bootstrap class with any defined width. Change the class (or add) one of the bootstrap grid elements and you should have no issues with the image inside scaling.
Related
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
I purchased an HTML5 one-page design web template but the author does not provide support. There is only an index.html file with the menu buttons linking to page anchors further down in the file. This template has a global portion of CSS that places a grouping of z-indexed images across the bottom of the page, to give the template its overall theme. When a menu button is clicked, the content of the corresponding page (i.e., page_ABOUT, page_SERVICES) slides smoothly into place from left to right, with the z-indexed images remaining unchanged. It works beautifully. A LIVE DEMO CAN BE SEEN HERE
My issue is that I need for one page anchor to be unique in that it does not have those images at the bottom. If I create a separate html file for that page, the effect is ruined because it doesn't slide into place as the others do; it causes a page refresh. My question: is it possible to override the global CSS for one page anchor within the index.html page, without having to create a separate html file for that page?
The HTML in the index file that places those images is:
<div class="add1"></div>
<div class="add2"></div>
<div class="add3"></div>
<div class="add4"></div>
<div class="add5"></div>
<div class="add6"></div>
Ideally, I would like one specific page anchor to not be affected by those div classes.
The unique page (page_PRODUCTS) is contained within these div tags:
<li id="page_PRODUCTS">
<div class="slogan"></div>
<div class="box">
<div class="relative">
<div class="scroll">
</div></div></div>
The direct link for the stylesheet is HERE
While it won't remove the images at the bottom of the page, these styles should make it so that the "page_PRODUCTS" page slide in front of those images
#content{z-index:auto;}
#page_PRODUCTS{z-index:50;}
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I am a new developer with roots toolkit. How to edit default roots class css wordpress? My question is about the classes like wrap,content,main etc. I also found some default classes for header,footer,aside etc. In which less file I can found this css for editing. Are these classes also the part of bootstrap styles and variables in roots kit?
You edit those in the base.php file. Line 15-17:
<div class="wrap container" role="document">
<div class="content row">
<main class="main" role="main">
These are not Bootstrap styles, but more of classes that you can utilize if you want, or delete altogether. By having a wrap there, you can target everything in the initial container, rather than any other container in the site. Same goes for content, or main.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion: