Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
Related
Please forgive my ignorance. I'm not really a coder. I'm a laid off graphic designer desperately trying to get my portfolio a little more polished than the wordpress site I had.
I've rebuilt from what Dreamweaver puts in when you start a new page with bootstrap 4. I've managed to get a lot customized with some help on here.
But I've broken something in the process, because it was working well until recently.
When I narrow the page, at some point in between the most narrow and a normal desktop size, the navigation exceed the container. When I view the site on my phone in landscape this is the default. I've taken a screenshot (further below) but I also have linked the site directly below.
Is this a media-query thing? I just don't even know where to look for this issue to resolve it.
My site, such as it is
Also!
Not as crucial but I'd love to fix.
a. How can I make the black band under the navbar stretch to the entire screen when it is at it's most narrow?
b. Is there a way (that I can manage without screwing things up) to make the container holding my banner and the navigation be black all across at it's most broad?
Thanks in advance!
Clare
Misbehaving Navbar when narrowed
1.5cm of padding I don't like when at the most narrow
so our site is built on a CMS and is using CMS driven background images on our banners, as such the banners has inline styles on the html element dictating what the background-image was. This all worked fine.
I made a change so that the css is in a style tag just before the element so there is no 'inline styles' on the pages.
This works fine on desktop, when resizing and using mobile browser simulators, but on 2 Android phones I've tested on some pages the banner image shows for a split second and then vanishes. The confusing thing is all the banners on the site use the same css and html, but only certain ones break.
The ones I know that break are on the 'Web Development' and 'Contact Us' pages.
This is not something I have seen happen before, and there is no difference between code on each page, no javascript touching these, and they worked before I made recent changes (of which the only bit effecting these was moving the style from inline into a style tag).
Working page:
https://www.pixelhero.co.uk/web-design-bristol/
Not working:
https://www.pixelhero.co.uk/about-us/
Does anyone have any ideas why this is happening? Or able to check if they see the same problem?
Image file sizes and dimensions don't seem to have any impact either (as often used to be the case)
I'm lost on this one, and can't seem to find an explanation for this use case.
Thanks all
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
So I've been tinkering with a REALLY simple web page (and this is why this is painful for me - it's a simple page) and I've been trying to make it responsive. I sort of had it looking right on a mobile screen, but the more I tweaked my code, the worse it got on other sizes.
So..I really hope that I'm not asking TOO much - but again the page is super simple, so this might be simple to answer..so I'll just jump in and ask a few questions :/
I want the page's big call to action image to disappear on a phone screen, and I'm trying to get the logo to center and the phone number to center right under it. I'm trying to get the bullet points images to center above the two lines of text..and the contact form to just fall in right below it (contact form was working just fine it seemed, so no big question there)
I'll link a live copy of the page as a reference - and a link to a page I've been mimicking in case it helps.
http://lab.blacksunresearch.com/ is my page
http://landing.trugreen.com/growth29 is the page im mimicking (sort of)
Again, I hope it doesnt sound like a TON of stuff, but the page is so simple, I'm probably only missing a few lines of code in my media queries
Thanks!
Edit: Moose, emoticon removed - also, I did ask a question - "How do I make this page more responsive?"
Open their CSS and look at parts with media-queries. There is what you want.
There are only 2 css which you should look through:
themeform.css
themeresponsive.css
You have to include some css to make it responsive ( Custom css , Jquery ,Jquery Mobile , Bootstrap etc) . Or you can simply put some Media Queries where you want your webpage to Act differently, ie responsive .
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.