in http://thebiztour.com/ a site with wordpress I'm having this issue:
normal text is re-scaling nice in mobile
but everything that it's under a < div > is not doing any resize and looks very small, it doesn't matter if you have the same font-size, or nothing related to that in the css related to this div
As you can see the text under the images is very small if you reduce the size of the screen
Now everything is working with sizes in vw and em, so, it should be more responsive.
Analyzing the css both texts have the same features, but they are working differently
Thanks!
If it's wordpress, then their themes are auto responsive. Anyways, use a site builder, like Elementor or WPBakery to create the website.
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.
Hi I am using corner stone to edit my web site, in wordpress using X theme.
Everything looks great and find on all screen sizes except for those 1300px width and larger.
ON my front page I use background images on two separate sections and set the padding to a large amount of pxs to fill out. However on larger screen sizes the background images look very small.
To fix this I tried to use custom css
#media (min-width:1300px){
.custom { padding:500px;
}
}
Yet nothing changes, any suggestions to fix this issue?
Thanks
On your wordpress dashboard go to Appearance > Customize > Layout & Design.
For Site Layout and Content Layout choose Full Width. Under Site Max Width, drag the bar to the far right. I believe the max is 1500px. This should solve your problem.
Ok, I'm using a responsive WP Theme and just discovered my images are not responsive. I understand why but my limited CSS is hindering me big time.
All the images have fixed width and heights. I want all images to be responsive so can I not simply override all img tags with new CSS to make them responsive? Do I need a widget to do this?
I've been trying simple CSS entries like
I can directly affect the size of each image using something similar to above but no matter what combination of width, height, max-height and %'s I use the images stay a fixed size and distort the page when mobile.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.