I'm doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.
Here's what it looks like here.
How can I change this in CSS? I've looked all over, and I didn't find any answers. I've tried changing the #Media CSS part on style.css
You could try doing:
margin: 20px;
That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.
Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.
#media (max-width: 480px) {
.<yourimg>: <your styling>;
}
This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example :)
You can read all about media queries here
Hope this helped a bit :)
// Marc Hjorth
i use this:
<div class="col m12 s12 l8 offset-l2"> </div>
which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.
for example, i'd make a container around certain area, set it as a row with a div and then use columns which change based on screen size
<div class="sections-container">
<section id="our-vision" class="section">
<div class="row">
<a name="our-vision"></a>
<div class="col m12 s12 l8 offset-l2">
</div>
</div>
</section>
</div>
I had quick look at the website.
There is an issue with an empty side bar that pushes the navigation down.
The sidebar with the following id:
id="sidebar-header"
You should try to disable the sidebar in your theme if you don't need it.
or you can add a simple css rule to your stylesheet to not display it:
#sidebar-header { display: none; }
to move the mobile menu you can edit this style rule in style.css on line 2795:
#screen and (max-width: 760) {
...
#access {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: none;
box-shadow: none;
}
...
}
Edit the top and left properties there (add some pixel values like: top: 70px; for example)
I hope this helps.
Related
I wrote a little program in angular using an ui-select element. The problem is that the search bar is really too long and I didn't find how to reduce it. Usually, we have some "width" properties that you can change for that but the css code is too complicated and I didn't find how to manage that. What I want to do is to save three bars at the same line.
I copied the sample from the official page of the ui-select, so it contains a lot of things in css that I didn't understand and I don't know much about css or bootstrap...
The style element in the index.html is this one :
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
And they included a huge select.css file in their sample that you can find in my plunker : http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview
Can you show me how can I reduce the width of th search bar?
Can you PLEASE show me how to remove all the unecessary line from the select.css included in the plunker that are not used in my example ?? I don't know how can I do that efficiently. I'm afraid to delete important elements and I really got lost in that huge css file.
Thank you in advance !
Edited 2 (How to use the col-xx-nn) properties with bootstrap
The xx indicates in which view you want the property to be applied:
xs : extra-small devices
sm: small devices
md: medium devices
lg: lg devices
The nn indicates how many column the element will occupy (total is 12). Please see http://getbootstrap.com/getting-started/ for reading the full docuemntation.
And this is how your code would be...
<div class="row">
<!--First ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Second ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Third ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
</div>
Edited
Include a custom css and put these rules. Make sure to include this after the ui-select css files in order to overwrite its rules:
.ui-select-container {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-match > .btn {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-choices {
max-width: 200px; /*put the desired width here!*/
overflow-x: scroll;
}
.ui-select-container .form-control {
max-width: 200px; /*put the desired width here!*/
}
Check this working plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview
In this plunker the rules are in myOwnCss.css file and I needed to add another custom rule in order to get this done properly because some of the other default styling of the ui-select. See below
/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
color: black;
background-color: white;
}
Important!:
Please, be aware that if you have an option with a name too long (it
takes more than you desired width, 200px in this case) it won't be
show completely in the selected option, and besides you have to
scroll over the x axis in order to read it completely in the dropdown
list.
When you create a ui-select item, it will generate a div for all its content, and with three bars, all those divs will probably be shown, one below the others. (TIP: you can solve this using bootstrap classes: col-md-4 for every div which wraps every ui-select)
I have a site at www. structuredata. com
when the site is on a desktop it looks great. However when it starts to get narrow, the red 'register' button starts to overlap the menu,
I'd like to make a media query in my css that will force the button to drop down below the navigation when viewed on smaller screens. How would I do that?
the header is setup as
<div id="header_main">
<div class="container">
<div class="inner-container">
<strong class="logo"></strong>
<nav class="main_menu"></nav>
<div id="text-8" class="widget"> BUTTON IS HERE </div>
</div>
</div>
</div>
I tried setting my .header_main.widget
to a display:block and inline-block but neither worked. I tried clear:both on it as well.
Media queries can be tricky, you can read a lot about them here(w3c) and here(mdn)
In your case the media query will look something like so:
#media screen and (max-width:320px) {
#header_main .container .inner-container .widget {
/*Styles go here*/
}
}
Hope this helps!
Your navigation bar and your button are on a different z-index, so that's going to be tricky. That's also why clear did not work.
You could set up a media query to adjust the top position of the button (being that it is relatively positioned), like so:
#media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
#header .widget .avia-button-wrap {
top: 50px !important;
}
}
But then you'll probably have to adjust some other elements in your header to make everything look okay. But this should get you started!
I have a normal, general CSS for a website.
After creating some #media queries to make my elements have different colors, sizes and etc on mobile and different resolutions, everything is fine.
The problem is when I resize the windows from a normal size to a small one, the effects are applied, but when I resize back to the normal one, the css is not refreshed, some "mobile" rules stay there.
How can I re-render the css without the #media rules, not refreshing the page.
This is an example of my HTML:
<div class="item">
<span class="item-foo">FOO </span>
<span class="item-bar">BAR </span>
</div>
With the following css:
.item-bar{
float: right;
}
#media only screen and (max-width: 992px){
.item-foo, .item-bar{
display: block;
float: none !important;
}
}
Here is a codepen of it:
Codepen
If you resize the view area to a small size until they turn in one span each line and go back to a bigger size, the "bar" element won't be in the right place.
As #JesseKernaghan pointed out in the comments, this is a chrome bug.
The easy-fix would be increasing the specificity for the button fixes this, as suggested by #SeanKeating.
In this question's case, adding this style fixed the problem:
.item .item-bar{
float: right;
display: inline;
}
Here is the codepen updated with the easy-fix
http://codepen.io/matheusbaumgart/pen/yyzXpp
i have a problem with z-index on my webpage, i need move shopping bottons to the top -100px but when i try it the button loose the actions not work anymore, i try to use z-index: 99999 but not work too, i need some help! here my page link limitx.panamerik.net
----IMAGES-----
This is the real image:
I need make this:
You're using top value in negative that means there could be problems with the followings:
the parent div is set to overflow:hidden; and don't show the element i.e. hide the element going behind the parent div. (remove overflow:hidden from the parent)
z-index value is not working? You didn't explicitly declared the position. (set position:relative or absolute)
UPDATE: After looking at your screen shots again I realized that you want to display the button to the right of the product images. I'm not sure if this is a good idea, because this theme is meant to be responsive.
But if you really, really, really want to do this then you may try to add the following <CSS> to your custom.css file:
#media only screen and (min-width: 768px) {
.products-grid .actions {
margin: 0;
position: absolute;
top: 100px;
right: -25px;
}
.owl-wrapper {
z-index: 1;
}
.slider-arrows1 .owl-controls .owl-buttons .owl-prev, .slider-arrows1 .owl-controls .owl-buttons .owl-next {
z-index: 2;
}
}
This will work as you can see in the screen shot below, when hovering the button.
I have added #media only screen and (min-width: 768px) because of the responsive nature of the theme. Otherwise, when the browser viewport gets smaller, the buttons would overlap the image. You may want to play a little with this setting and should test it on some mobile devices too.
To learn more about this see this question.
EDIT: I'll leave my original answer below, just in case this may
helpful to someone else in the future...
I see that you use Infortis Ultimo theme, which is a great choice. I don't think you should use <CSS> to move the button. It is better to move the entire <div class="actions"></div> to the top.
The result will look like this:
You can do this by making some changes to the following file:
app/design/frontend/ultimo/default/template/catalog/product/list.phtml
Somewhere around lines 273 to 289 (depending on the themes version) you will find the code for this:
<div class="actions clearer<?php echo $actionsClasses; ?>">
....
</div> <!-- end: actions -->
Note: It is best to first copy the entire list.phtml file to your own sub-theme
and make the changes there.
In your sub-themes list.phtml file just cut the section I mentioned above and move it up to somewhere around line 216 of the file.
Paste it right after the beginning of the <list class="item"> element and before the <div class="product-image-wrapper"....>, just like this:
<li class="item">
<!-- PUT THE CODE HERE -->
<div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">
Also don't forget to add this in your custom.css style sheet:
.products-grid .actions {
margin: 0 0 10px;
}
This should do the trick for you!
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)