I am trying to emulate an "Instagram" style menu for a website for its mobile version. Everything is fine but the problem is that I have a little scrolling issue with the x and y axis in which there are a few pixels more than intended.
I would like to make it 100% fixed so no scrolling is triggered.
I would paste the code but as I am working with a commercial Wordpress theme I find it over-complicated.
The website url is:
https://www.galaventura.com
Thank you very much
Actualization:
I provide two screenshots to support my question. In the first one there is the current state of the navbar. In the second one, the result I seek. Don't pay attention to the unaligned icons. A third image is provided to synthesize my exposure and might make the issue clearer.
The texts in the anchor links (INICIO, NOSOTROS, etc.) breaks the layout. So set font-size to something small, for example 10px:
.ast-header-break-point .main-navigation li {
width: 100%;
font-size: 10px;
}
Related
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
new to the forum here-
I developed the Wordpress theme that I want to use for my blog- and it looks good on the test site: http://flashandshine.com/eyesofstyletheme/
But when I upload it to my blog: http://eyesofstyle.com/
the nav menu doesn't have the background color, isn't static, and isn't at the top. When you click a post and view a post page, the sidebar is right where I want it. I'm confused as to why it's pushed to the botom on the home blog page.
I was hoping to change this theme around and sell it as a template, but I can't have it moving the sidebars to the bottom! Can anyone help me out with this? I really appreciate it!
If you are looking to sell this, it will need some major overhauling.
Looking at the CSS, you have some very extreme oddities. The main one being that you are using margins to determine the spacing from the sides instead of making a main container which sets the width.
To get it looking sort of alright, change the #blogcontent to show this:
#blogcontent {
margin-right: 0px;
margin-left: 17%;
max-width: 40%;
float: left;
}
Overall though, you will want to change things around a great deal.
This is how you should really want your layout to be using a proper grid layout. Click here.
Its all stuff you pickup along the way though. Hopefully this helps push you in the right direction though.
I have a wordpress blog and by default there is basically double spacing between every line, leaving a white space, on the text widget. This has something with the theme, and after spending some time going through the coding I was unable to find it (I'm extremely new to coding and have been teaching myself...
Anyways, even using html codes to try and reduce the space have not really helped. Here is an image of the text widget that I'm talking about:
Image
And also, here's a link to my site tradingliberation.com. You can see the widget on the right side of the screen, with the label "Key Data Calendar."
Again, please keep in mind I know pretty much nothing when it comes to coding. Sorry for the ignorance and thanks for your help in advance!
Looking at the code, it seems that the result of your vertical spacing is line-height CSS property :
(line 755 in style.css)
#sidebar ul {
line-height: 24px;
...
To set line-height for just this small part of your sidebar, you can wrap the content in a div tag, to which you apply a desired line-height.
However, you shouldn't define line-height in pixels. Percentage value or EMs would be a better idea. In this case, you'd just change it to line-height: 150%;
To troubleshot this kind of problems you should use some kind of Web Developer tool. For Firefox, there's a native one, or Firebug extension. For Google Chrome and IE it's the built-in Code Inspector. You can switch them on by pressing F12 in the browser window.
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
First of all, let me say that I am not a professional coder - I've done every change on my site bit by bit and I'm not sure I really get how I made some things work.
That said, I had posted what seemed to me two simple questions (for people who actually know what they are doing on the Wordpress forums and received nothing but a smart#ss remark that I needed to learn CSS. Anyway....
ONE I have changed the overall fonts on the site but I can't seem to get the body of a post - and it alone to change to a better font for reading. I have set up League Gothic as my main header, sidebar, homepage fonts but I need to change the font in the body of the post itself to something a little easier on the eyes. And every combination I try changes ALL the fonts or doesn't work at all. ANY good advice?
TWO I have image/text just below the banner on my site. There are two small icons on each side of the "navigation bar" I want all to be horizontally/vertically aligned but the two icons on each side appear just a little above the first line of text - and this shoves the bottom row of text onto the background image.
CAn anyone please tell me what I'm missing?
The site is thirdrailers.com
Thank you so very much...
(ALSO, There are other additions I will be making down the road - if anyone can refer a coder/designer I would be very grateful.)
1) You want to change the font for: #post-content p and also .recent-postwrap p, .main-postwrap p. This will change the interior pages and the home page, respectively. You can add: font-family: Arial or whatever fonts you'd like to use.
2) Quick fix, though not the best. On the images, add style that says for the left image: float: left; margin: 15px -20px 0 20px; -- adjust those numbers accordingly. On the right image, just change it to float: right; margin: 15px 20px 0 -20px;.
Hope that works for you.