I just migrated a WordPress site from my localhost to the Rackspace cloud hosting. This is my first time working with Rackspace. For some reason, the page-width on the new site is a little over 200px larger. So all of the layout is thrown off, since it was styled for a page that was scaling smaller. I'm looking for a way to either resolve this discrepancy, or at least fix the styling without having to re-size every rule that applied to width. I am also using Bootstrap in the project. I have tried various things to get the page to adapt to the new view, such as various settings for max-width, but nothing so far has had any affect. Thanks in advance for any suggestions. I really appreciate it.
Since you're using bootstrap you can simply add
class="img-responsive"
to your tags. this will allow your images to scale down. Now in order to get your images to scale up (larger) you'll want to add a css class like this.
.parent-class img {
width:100%;
}
Here is a working example. Try resizing your browser window.
Related
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
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.
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.
I recently develop a site and I noticed that when I use the scroll zoom(ctrl+mouse wheel) on other sites it works great but on mine it has a strange behavior with not all of the components scaling as they should.
On the css file I used only percentages in order to keep resolutions/size problem to minimum...but I don't know if that has anything to do with the present problem.
you have the width 100% on the css of the classes (for example images). This is your problem. Use width:auto; and will resize them too