I am having a tough time fixing a small issue. I am little embarrassed in asking help for this CSS issue but a different set of eyes might help fix this.
ISSUE
Go to http://ajaxtown.com/uranium/
Extreme top you will find a bar (telephone number and social icons and search)
Now resize the window (mobile size)
Again maximize it to full width.
You will see the search icon coming down.
RESOLUTION
While experimenting with firebug, i found that if you inspect element on the search icon, you will find the below css.
.top-search {
float: left;
width: 40px;
}
If i uncheck float and then again check it, everything gets fixed. The search icon gets aligned with the social icons.
But I am not able work this out.
Any help will be highly appreciated.
Please let me know if I am not clear with my question.
Saha
I placed the search into the .social-icons div
<div class="social-icons top-social-icons">
<i class="icon icon-twitter"></i><i class="icon icon-facebook"></i><i class="icon icon-rss"></i>
<div class="top-search">
<a class="top-search-bt open" href="#">
<i class="icon"></i></a>
</div>
</div>
Quick fix
That works for me on Chrome (Canary)
<div class="social-icons top-social-icons">
//social icons here
<a class="top-search-bt open" href="#"><i class="icon"></i></a>
</div>
CSS fix
.topbar-right .topbar-right-inner {
border-right: 1px solid #E2E2E2;
width:163px;
}
#media only screen and (max-width: 767px)
{
.topbar-right .topbar-right-inner {
border-right: none;
margin: 0 auto;
}
}
I managed to solve it this way:
In CSS:
//Before
.top-search {
float: left;
width: 40px;
}
//after
.top-search {
display: table;
width: 40px;
}
Related
i have a website done in bootstrap, the menu is working fine in desktop
<button type="button" class="dropdown-toggle pull-left" data-toggle="dropdown" data-target="#navbar-menu" aria-expanded="true">
<i class="fa fa-bars"></i><span style="font-size: 10px;width:100%;float: left;"><b>menu</b></span>
</button>
now when i loading it mobile, and open the menu, its not scrolling so i am not able to see the options in the dropdown, instead the background is scrolling, i searched and saw an answer in google like below:
.navbar-nav {
height: 150vh; // <-- This will fix the collapse animation
}
.navbar-collapse.in {
overflow-x: hidden;
padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}
#media (min-width: 768px) {
.navbar-nav {
height: auto;
}
}
but still the menu is not scrolling and the background is scrolling. can anyone please tell me what could be wrong here, this is my live url enter link description here
thanks in advance
i finally got a fix for this, i gave hieght for the menu and gave overflow scroll
.navbar-nav {
max-height:400px;
overflow-y: scroll;
}
Just add navbar-nav-scroll class to the existing navbar-nav class, that will solve all scrolling issue.
I've searched the internet high and low here, but cannot find the answer. Basicaly, my styling looks as intended on desktop and tablet view. Some elements stay styled as they should, but most have not in mobile view. I have made sure that I have added <meta name="viewport" content="width=device-width, initial-scale=1">in my head tag, and the path to my CSS sheet is correct (as other screen sizes are styled correctly).
I have been able to make the changes I want to in Dev tools (on Firefox), but when I add the same values (in and and out of a media query) they do not appear to do anything as when I save and refresh my page it reverts back to the incorrect styling.
Does anyone know what I can do differently or add to my code to help? Thank you in advance.
EDIT: here is a snippet of my HTML and corresponding CSS
h2 i {
color: #fafafa;
}
.profile-text {
padding: 100px;
}
.profile-text p {
font-size: 18px;
}
.about {
padding-top: 10px;
}
img {
vertical-align: middle;
border-style: none;
width: 100%;
}
.photo {
height: 50%;
overflow: hidden;
}
.contact-info {
background-color: #c158dc;
text-align: center;
color: #fafafa;
}
.contact-info .value {
padding-left: 20px;
}
.value {
margin-bottom: 10px;
font-size: 18px;
}
<div class="row no-gutters">
<div class="col-md-4 contact-info">
<div class="photo">
<img src="assets/images/bratislava-sm.JPG" alt="profile image">
</div>
<div class="upper value">
<p>Amy H</p>
</div>
<div class="value">
<p><i class="fas fa-map-marker-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-phone-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-envelope-open-text"></i> test here</p>
</div>
</div>
Without more information, it's impossible to tell what's going on. Some possible things to check:
Make sure you're using cachebusting and that your mobile device isn't just showing an old cached version.
You can apply an obvious style rule to make sure your changes are being applied, like background: red;.
You can use Chrome or Safari's remote device inspection to inspect the page on your mobile device, if it's connected via usb to your computer. Try it at chrome://inspect
So after talking to one of my tutors, it turns out that I had opened a media query further up my CSS file, and in my editing I deleted the closing curly brace. All these issues caused by one little }
So if anyone else has the meta tag in and sill struggling, check all your curly braces are closed.
I'm building a website layout and I'm trying to have a list of images with descriptions centered next to them, but I can't figure out how to get the paragraphs to move next to the images without the entire layout messing up. I've messed around with the float, clear, and display settings with no avail. I added a picture of my desired result
my HTML for this section looks like this currently:
<section>
<ul id="gallery">
<li>
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
</li>
<li>
<p >
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</li>
<li>
<a href="Avengers_App_Screen.png">
<img src="Avengers_App_Screen.png" alt"">
</a>
</li>
<li>
<p>
Okay, who doesn't like The Avenegrs movie series? Huh? Well, yeah I guess you're right, but it doesn't matter because I love it! I made this app to
test out layout design, android intents, and a few other features. It's also
a great way to kill 4 minutes.
</p>
</li>
</ul>
</section>
and my CSS that goes with it looks like this currently:
#gallery {
margin: 0;
padding: 0;
list-style: none; /*Removes bullet points*/
}
#gallery li {
width: 45%;
margin: 2.5%;
background-color: #b3dbeb
color: #1d95c5;
}
.descriptions {
display: block;
}
.descriptions a {
float: left;
}
For each p tag just add a clearfix class and import bootstrap or any other framework with clearfix support or do as below
.p:before,
.p:after {
content:"";
display:table;
}
.p:after {
clear:both;
}
.p {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Try flex box on the parent of your two elements:
display: flex;
Or try float right on paragraph:
.description p {float:right}
Make sure to define widths first.
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I'm trying to do a list with two sections and different links on each one but I am not able to do it without using an icon in the right section of the list.
I have tried to put data-icon='false' everywhere but it doesn't work, it uses the default icon.
I also have tried to use and it works but I am not able to make it look as good as the split list.
Any idea on how to do this??
Thank you very much!
Can you override .ui-icon class of jquery mobile something like this,
.ui-icon-your_name_icon {
width: 18px;
height: 18px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-position: 50% 50%;
background: url("../images/some_one_image_transparent.png") no-repeat scroll 0 0 transparent;
}
I hope this helps. :)
I have managed to do it with controlgroup like this and playing with widths in .css file:
<li data-role='list-divider'>
<div data-role='controlgroup' data-type='horizontal' >
<a class='resume' type='button' href='javascript:void(0)'>
<span class='name' >Object Name </span>
</a>
<a class='info' type='button' href='javascript:void(0)'>
<span class='name'>Max Value </span>
</a>
</div>
</li>