Hi there Fury,
You would might have to add a couple media queries to your CSS. You can use fire bug or Chrome Dev tools, change the window to your phone size and take it from there. It should just be a simple padding or margin issue just as you thought. If you have any questions just give us a shout.
Wolfy and Brain (^_^)
Thread Starter
jrfury
(@jrfury)
I don’t know what media queries are or where to implement them. Can you elaborate a bit? I guess I would have to determine iPhone resolutions and find these dimensions in the bootstrap file and alter them. Am I on the right path? I’ve never had to do this before so any help would be appreciated. I’ve never experienced this issue before.
Well all changes would be done through CSS. You mentioned the theme you have at the moment has a CSS override. You could probably add the Media queries there. If not, you can make the changes either in a plugin such as Jet Pack or through a Child theme.
Media Queries are basically css that is specifying a css function to a specific screen size.
Here is one link i found useful.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
In the end your media queries would have this format.
@media (min-width: 700px) { ... }
Your css changes would go where the dots are.
I wouldn’t change the Bootstrap file in any way. Just add the new css code to the plugin, child theme. or the css override you mentioned. Hope this helps. If you have any further questions let me know
Thread Starter
jrfury
(@jrfury)
I figured it out, it was as easy as firebug and a few css edits. Thanks for your help!
Any time Fury. Thats what we’re here for. If you ever need anything else feel free to ask.