I'm using Drupal. I have added a sitename and slogan to my kickstart sub theme which is a subtheme of omega. i then added a telephone number through the branding.tpl.php file. When I resize the window, the branding text moves down and behind the rest of the elements on the page - it doesnt push everything else down like i would like it to.
The site I am working on is www.mediamatterstechnology.com, please could someone give me some suggestions on how to fix the responsiveness of this branding section.
What I would like to happen is that when you resize the window, the branding section moves down as it currently does, but pushes everything else down with it, rather than disappearing behind other items on the page.
Thank you so much for any help with this
Your first problem is that <hgroup class="site-name-slogan"> has a specified height of 150px. Changing this to auto allows the text to expand into the space it requires.
This introduces a second problem though, in that the absolutely positioned menu widget interferes with it. How you solve this could have design implications though and there any many possibilities.
One solution is to force a bottom margin on the hgroup when the design is in the mobile version of the layout with the following CSS rule:
body.responsive-layout-mobile hgroup.site-name-slogan { margin-bottom: 40px; }
Related
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
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
I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
My website is built, (graphically designed) to be compact. Because my background will not look good on repeat, fixed, or with a white/black gradient towards the bottom. The thing is, I need to have a fixed content area, because of the graphical nature of my site. A box, which has to remain the same size, at all times. So, my question is, can I use wordpress, in such a way, that I will get a sort of iframe, within my content area, without the content area dragging on for how long the content is ? Let me show you an example of what I want : http://s15.postimage.org/obk0ivffv/2352366d.png
Can this be done, in wordpress ? Through CSS or something ? Thank you.
Just wrap your content in a div, and set a max-height and overflow-y:scroll on that container with css.
Edit: fiddle example
http://jsfiddle.net/Kncy6/