I'm developing a WordPress website and have some trouble with the header width on some specific screens as you can see in the image below.
Does anybody know where I can adjust this in my template? (I guess it has something to do with the min-width.) To take a deeper look, the URL is www.brainfarts.shop.
I think this is an error with the media queries, I see the trouble when I change the width between 1,000px and 1,280px (both widths included).
I don't know much about Wordpress but if I were you I would try to mess with the site changing things with the element inspector of any browser and then try to apply the changes in some place in your Wordpress, in some section where you can insert your code (css).
Related
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.
I've been playing around with WordPress. As a programmer, the media library seems a little strange to me - but I'm keen to understand how I can achieve what I need with the framework. Cue WordPress enthusiasts...
I need to force my WordPress post images to be a certain size. I'm not talking about the thumbnail size, which I've found can be easily manipulated within the loop, but the images that actually get inserted into a post, amongst the writing and the other media. I have a fixed content width, and I would like the images to reflect that width (uncropped).
Obviously, I could run some sort of Regular Expression that could identify the image tags, and replace them with new sizes, but is there really no other way of forcing image sizes within the post while retaining there position amongst the formatted writing that comes with it?
So far, I'm guessing that there is a CSS property out there that is used by WordPress in all images. At a push, I'm willing to go with this - whatever it may be (answer needed). But I was hoping that their might be some more involved code (perhaps something I could plop into the functions.php file) which could actually force any inserted post images to be a certain width.
Any thoughts on this would be much appreciated.
If that's only about limiting the max width of an image and prevent an image from overflow, you could use the $content_width variable in your theme:
https://wordpress.stackexchange.com/questions/6499/how-to-create-a-conditional-content-width-for-a-wordpress-theme