I am looking for some simple guidance for someone that can cope with most design basics but I am stuck in one area of my website design for findmethatwine.com
Dektop site is working as we want it (always room to improve but hey). It is the responsive side in one area I am grappling with. The logo for the site when you reduce screen size to tablet or mobile the template responds. The issue is I want to float the logo over to the left of the screen (for mobile devices) so this gives us room to use the right hand side of the screen to create similar blocks of content for the important free shipping and guarantee info that shows up on the full desktop site.
I have tried all manner basic float left in the css for the site and whilst it moves the logo it causes styling issues for the links in the very top right especially the sign in link which just messes up entirely.
Any clues as to how to go about achieving this or a work around would be massively helpful as neither me or my colleague can figure this headache out.
Sorry if I am missing any useful info you need, just ask.
One option would be in your stylesheet #
https://cdn5.bigcommerce.com/r-cd74cb12e5d8e952a812b68d3d60382a14b97a1e/themes/California/Styles/responsive.css
goto line 128 and change the rule to
.header-logo-mobile{ display:block; margin:0 auto; display:table; width:96%; text-align:left; padding:20px 0 16px;}
Then you are positioning the logo by a simple text-align property and if may cause you less grief that if you float it and take it out of flow.
Good luck!
Related
I have been hunting around and haven't found a solution that works yet.
Here is my site which does what is needed on a desktop but when it loads in mobile the upper icons are no longer centered but the lower ones are
To supply all the code here would be long so I'm sure someone will knock me for that but to me it seems easy to use the inspector since i'm not sure if css else where could be effecting this.
I will gladly paste all of the code here if really needed.
As you can see on the desktop they are in a row but on a mobile I would like to have them centered and 2 in a row on portrait and all in a line on landscape but still be centered in the screen.
My Site Desktop
My Site in an iPhone 5 view
Within your div .centermiddle you have divs named .view that have the style float: left;
Instead of floating your elements you should set them as display: inline-block; which is the correct way of achieving what you want to do.
Doing so will center those buttons for you.
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'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
I've been scouring the forums without a clear solution to my problem so I figured I'd give stackoverflow a go. In short, I need to know how I should go about positioning the elements on my site. When maximized, the images appear fine with the iframe as it should be. Upon resizing the browser, my sliced images shift to the left and distort my layout. My question is, should I use and div within a div to position my elements or is there another method I should be searching for? I know that I could possibly use CSS to position things but I would like a clear answer if possible as I've already spent countless hours on this. Thank you and my apologies in advance if I've left out pertinent information.
http://hrsolavei.dx.am is where the site is located, please take a look and give me some feed back. Thanks again.
If you want to position the content of your website using an iframe like you have it right now, and the layout in a separate table, then you need to give your iframe the css of position:absolute; right:50%; Then, for the div surrounding your iframe, the css should be overflow:visible; position:absolute; left:50%;
Now, I implore you to please research web development best practices, as they will make your website much easier to develop, and easier to change later on. The big ones that I noticed are that you should try using divs for your layout instead of tables. Tables are meant for storing information much like the image in your iframe does. You should also look into organizing all of your styles using a css file.