I have a problem with buttons when my site switch on mobile version
Html is:
<p style="text-align: right;">
<a class="button btn-primary" href="index.php/reprogrammation/193-bmw"> Retour "Choix de la marque" </a>
</p>
<p style="text-align: center;">
<a class="button btn-primary" href="#">2005 - E8x</a>
<a class="button btn-primary" href="#">2007 - E8x</a>
<a class="button btn-primary" href="#">2011 - F2x</a>
</p>
<p><img style="float: right;" src="images/marques/bmw/serie1.png" alt="" width="400" height="150" /></p>
CSS is:
.btn-primary {
background: transparent none repeat scroll 0% 0%;
border: 2px solid #C01C32;
border-radius: 20px;
font-family: "Montserrat",sans-serif;
font-size: 13px;
text-transform: uppercase;
padding: 8px 24px;
Here are two screenshots:
PC Version
Mobile version
Can anyone please tell me how to put a space between this buttons
.btn-primary {
background: transparent none repeat scroll 0% 0%;
border: 2px solid #C01C32;
border-radius: 20px;
font-family: "Montserrat",sans-serif;
font-size: 13px;
text-transform: uppercase;
display: inline-block;
margin:10px;
padding: 8px 24px;
}
I suggest using the display inline-block to achieve the desired affect, adjust to preference.
Thanks with inline-block and margin:5px
Related
I want to make this form to search for a keyword in my database that display and highlight it in my webpage with that specific words that is typed in the search bar. purpose of this code is a FAQ for a web-app I'm developing
<form>
<input type="text" placeholder="Search..." style=" flex: 1; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; width: 70%;">
<input type="submit" value="Search" style=" width: auto; padding: 10px 18px; background-color: #4CAF50; color: white; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;">
</form>
#foreach($kb_info as $kb_info)
<div class=" {{$kb_info->kb_category}}">
<a href="/adminkbView/{{$kb_info->kb_ID}}" class="card content {{$kb_info->kb_category}}" id="content clickable" style="margin: 1%; cursor: pointer; text-decoration: none; color: black;">
<div class="card-header">
{{$kb_info->kb_title}}
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>{{$kb_info->kb_content}}</p>
<footer class="blockquote-footer">{{$kb_info->kb_resolution}}<cite title="Source Title"></cite></footer>
</blockquote>
</div>
</a>
</div>
#endforeach
attached image is the preview of my web-page
I tried using this script and it does nothing.
const form = document.getElementById('search-form');
const input = document.getElementById('search-input');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log(`Searching for: ${input.value}`);
// Add your search functionality here
});
All the people use the normal dropdown like:
<form>
<select>
<option> bla bla </option>
</select>
</form>
Like that I can get the selected value trough PHP. But if I use divs I can't get the values from the multiple dropdowns.
function select_best_plan(sel, _this) {
$parent = $(_this).closest('.select-general');
$parent.find('button font').html($(_this).find('font').html());
$parent.find('.select-menu .select-menu-option').removeClass('active');
$(_this).addClass('active');
}
.select-general {
display: inline-block;
overflow: hidden;
border-radius: 12px;
vertical-align: middle;
position: relative;
text-transform: uppercase;
background: #182045;
color: #FFFFFF;
width: 170px;
min-width: 160px;
text-align: left;
font-size: 15px;
max-width: 100%;
}
.select-general .select-button {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
border-radius: 12px;
color: #FFFFFF;
width: 100%;
}
.select-general .select-button font {
text-align: left;
width: calc(100% - 20px);
height: 100%;
overflow: hidden;
max-width: 340px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-general .select-menu {
padding: 0px;
overflow: hidden;
max-height: 0;
transition: max-height 0.15s ease-out, padding 0.15s ease-out;
}
.select-general .select-menu-option {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
color: #FFFFFF;
width: calc(100% - 26px);
cursor: pointer;
}
.select-general .select-menu-option font {
text-align: left;
}
.select-general .select-menu-option:hover {
background: #1A2A74;
}
.select-general .select-menu-option.active {
opacity: 0.5;
}
.select-general:hover .select-menu {
padding: 10px 0px;
max-height: 500px;
transition: max-height 0.15s ease-in, padding 0.15s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
<div class="select-menu-option" data="3" onclick="select_best_plan(7, this)">
<font class="float-left">Até 3</font>
</div>
<div class="select-menu-option" data="5" onclick="select_best_plan(8, this)">
<font class="float-left">Até 5</font>
</div>
<div class="select-menu-option" data="10" onclick="select_best_plan(9, this)">
<font class="float-left">Até 10</font>
</div>
<div class="select-menu-option" data="15" onclick="select_best_plan(10, this)">
<font class="float-left">Até 15</font>
</div>
</div>
</div>
My idea is that the people select the first div "Apenas 1" and on submit I get that values on PHP.
I really can't find any tips that can help me or I'm just newbie on this..
Thanks.
Just add <input type="hidden" name="select" id="hidden-select" />
Change <div class="select-menu-option" data="5" to ... data-val="5"
and in: select_best_plan add
$('#hidden-select').val($(_this).data('val'))
There is lot of content available online explaining a lot of ways to implement this kind of a behavior.
One such link -
How to use FormData for ajax file upload
Set value of hidden field in a form using jQuery's ".val()" doesn't work
For more ways of implementation you can google with these key words -
Ajax calls
Submitting form with hidden input fields
How to build and submit Form using FormData. etc
Sorry for the first answer.
Well if you want to use customize select then use JavaScript to get the data. Normally only input tags select can be post or send automatically by form tag.
The submit button triggers a JavaScript function then get the value of the selected div then create a input tag containing the value of the div.
Ex:
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
function getselectedval(){
var data = $("div selected identifier here").attr("data");
$("container of passing input").append('<input name="name" val="'+ data +'" type="hidden">');
//submit the form
$("your form").submit();
}
This seems to be a cheat but hope this helps.
Got a loop going in a grid formation. 3 posts per row, per category. Using bootstrap to create the layout. At full width it's working and how intended, however it's not responsive. Any ideas what I got wrong here?
Full Width
https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0
Reduced Width (not responsive)
https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0
Edited Outputted html and css (written in sass originally).
#blog-section {
padding: 53px 0
}
#blog-section h1,
#blog-section h2,
#blog-section h3,
#blog-section h4,
#blog-section h5,
#blog-section h6,
#blog-section a {
padding: 20px 0 10px 0;
-ms-word-wrap: break-word;
word-wrap: break-word
}
#blog-section h1 {
color: #72b466;
font-size: 30px;
line-height: 35px;
margin-bottom: 23px;
padding-bottom: 22px;
display: block;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
border-bottom: 2px solid #ddd
}
#blog-section h2 {
font-size: 22px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section h3 {
font-size: 28px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section .blog-image {
width: 300px;
height: auto
}
#blog-section p {
font-size: 14px;
font-weight: 500px
}
#blog-section .blog-image {
margin: 0 auto
}
#blog-section a {
color: inherit;
text-decoration: none !important
}
#blog-section .shortlink {
color: crimson
}
#blog-section .custom-border {
padding: 10px;
margin-bottom: 20px
}
#blog-section .btn-home {
padding: 20px;
margin-bottom: 20px;
border-radius: 5px
}
#blog-section .btn-list {
padding: 20px;
margin-bottom: 10px;
border-radius: 5px
}
#blog-section .row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
#blog-section .grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, 0.15);
height: 100%;
padding: 10px;
border: 2px solid gray
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="blog-section">
<div class="container my-container">
<div class="row row-eq-height">
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/certified-compostable-products/">
<h2>Certified Compostable Products</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image4" /></div>
</a>
<p>
<p> PLEASE NOTE: We ALWAYS recommend that businesses replace disposable products with reusable ones. Waste reduction is the best way to handle your waste, followed by recycling and composting. Is there a way for you to stop using straws
altogether, rather than looking for a compostable straw? Or coffee cup? Or plate? That’s the goal. […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2382" title="Certified Compostable Products">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/importance-of-signage/">
<h2>Importance of Signage</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image3" /></div>
</a>
<p>
<p>You may have read the title of this post and thought: “Everyone knows how to recycle, do I really need to put up signs?” Yes you do! It’s very, very important, and it’s the law!. Most people know, or think they know, the basics of recycling,
but when they are standing in front of three […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2372" title="Importance of Signage">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/nycs-commercial-recycling-laws/">
<h2>NYC’s Commercial Recycling Laws</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image1" /></div>
</a>
<p>
<p>NYC’s commercial recycling laws are hard to keep up with and key information is often difficult to find. Don’t stress! We’ll help you stay up to date and in compliance. The most recent official notice regarding commercial recycling rules
in NYC was released by the NYC Department of Sanitation on February 5, 2016. Link to […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2356" title="NYC’s Commercial Recycling Laws">Read More</a></button>
</span>
</div>
</div>
</div>
</div>
<!--/.row-->
<div class="clearfix"></div>
</div>
<!--/.container-->
</section>
</html>
Check your image container and your images, I think they're not responsive.
Your .blog-image class has a fixed width and the images within it should have width or max-width set to 100%.
EDIT
Also, if you are trying to use the Bootstrap class for image responsiveness, you should use the class .img-responsive in the img tag, not in its container. And the class name is .img-responsive and not image-responsive.
Have you added responsive meta tag in head section? If not, then add this tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> to head section of your html.
It turns out the problem was with the fixed height border.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
height: 100%;
padding: 10px;
border: 2px solid gray;
}
Instead will make a media query that removes the border on smaller screen sizes.
#media (min-width: 992px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
height: 100%;
padding: 10px;
border: 2px solid gray;
}
}
In my web i allow user to post comment with there name and picture. I have notice one issue that when some one post bigger picture in comment using html code it run out of comment box. so all i want is thing should stay inside a comment box. not matter how big picture they post. i have posted all detail below kindly help thanks :|
My html
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
</div>
My css:
.mycomment {
font-weight: normal;
color: #000000;
border: 2px solid #DEDEDE;
letter-spacing: 1pt;
font-family: arial, helvetica, sans-serif;
float: left;
width: 550px;
margin: 20px 0;
}
#postpic {
float: left;
width: 70px;
}
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: right;
}
.postername {
color: #580000;
font-weight: bold;
font-size: 1em;
text-decoration: none;
}
Comment here is just a picture:
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
Solved : By adding this ->
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
Add to your CSS
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
This way you will limit the max sizes of added images..
no matter what size of image they upload using this css set the image to default size in your mycommentpost div.
> .mycommentpost img{
> border: 1px solid #DEDEDE;
> padding: 10px;
> width: 130px; }
Try this
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: left;
}
.mycommentpost img{
width :450px;
}
My client looks great in Firefox but looks a little funky in Chrome :(
Here's some of my html code.. from the Inventory layout
<div class="clientinventory">
<div class="objtitle">
<p>Ore Inventory</p>
</div>
<div class="invitemvalue">10</div>
<div class="invitemtxtholder">Copper</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Iron</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Gold</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Platnium</div>
</div>
Here's some of my css code.. from the Inventory layout
.invitemtxtholder {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
background-color: #543C25;
border: 1px solid #000;
color: #FFF;
width: 60px;
text-align: center;
float: left;
clear: left;
}
.invitemvalue {
clear: right;
float: right;
font-style: italic;
color: #000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
width: 65px;
}
NOTE: I'm not allowed to post pictures apparently lol so heres the link
http://www.ultimate-miner.com/UM2/Client.php
I can see a difference.
The Submit button jumps down in firefox but stays inline in chrome.
Add some width with css to the submit button and that will be fixed :)