The topic says it all. I've been trying various code propositions from various websites with no success.
This is the site: http://jakubplech.pl/kontakt-copywriting-slask/
The form is in the bottom, i'll be glad for any help. Please mind that i don't want to play with padding or margin - it should align to center on any device used to visit the site.
Thank you kindly.
Turns out it was way easier than i thouth - the solution is a simple
div.wpcf7 {
text-align: center;
}
Aligning the text in wordpress page editor did not work - it had to be done in the additional CSS space.
div.wpcf7 refers to the whole designer contact sheet. Loks like working during late hours is not always a good idea :)
Related
I'm building a website on WordPress using the Stockholm Theme. Generally it's mobile responsive and most things work quite well.
One thing that's causing me trouble is 'buttons'.
There's an example on the following page:
https://med4eu.co.uk/proces
It doesn't display correctly on mobile. The width is too long and goes off the page. I'm trying to figure out how I can make it go into multiple lines (so text spread over 2 lines instead of 1, where necessary, to fit on the screen).
Happy to consider other solutions you might suggest as well.
Here's what it looks like on mobile:
You can view source code on the above link.
Help much appreciated, as always! :)
Add only for mobile media query this property to "a tag" button:
white-space: normal;
display: block;
height: auto;
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
This is the site I am referring to: http://heattreatforum.flyten.net/
It was built as a child-site to the twenty-twelve theme.
I can't seem to get the content to center on every screen, and I am seeing a strange wide margin on the right that I just can't seem to locate in my css.
Any help would be much appreciated - thanks for looking!
The problem is that your div having id my-name has min-width: 1510px;. Delete it and all your problems will disappear.
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 am making a simple little web based control panel of sorts, and my lack of CSS knowledge is killing me. I basically need to make a div class that uses both an image icon and places a text caption underneath it (both are links to the target page).
I found some examples for doing this on various sites, but none of them work for placing the icon/captions side by side. To give a better idea of what I am trying to do, CPanel is a perfect example of what I am trying to accomplish.
How can I go about doing this?
Something like this maybe?
<div class="image-caption">
Some Text
</div>
.image-caption {
background: url(icon_path) no-repeat top center;
width: icon_width;
padding-top: icon_height;
}
Found a website with a very simplistic approach that works perfectly here...
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm