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.
Related
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.
I bought a bootstrap 4 admin theme but its sizing (fonts, spacing, images) for desktop is to large was the feedback I got from client.
However if I change the zoom to 70% the sizing of all the elements is exactly what I need.
I want to make the 70% zoom default in the css for desktops but that only keeps it for my browser on my computer. Is there a css setting or other setting that allow me to do it for all computers.
Since the base theme will get updated by the original auhtor often
I have tried changing the css - font size, spacing, image sizes on so many CSS elements but surely there should be an easy way to simulate make it 70%.
You can adjust the css styles of your elements to fit the purpose.
Have a look at the current value and multiply them with 0.7
If the sizing is defined in rem you can just change the html sizes for the content to fit as rem is aquivalent to the sizes of the html wrapper
So Im making a website and I have included a .css file to be able to move things more freely. I have made some items with position:relative and others I have used the absolutePanel(). I want to keep my layout as it is but when the window is resized it looks horrible. Any suggestions?
You should try to be a bit more specific on your question.
Some general tips though are instead of using pixels for the sizes of divs etc.(static design) use either percentages, vh & vw (view height and view width of the window that are being displayed respectively) or media queries #media (responsive design). To make your life a lot easier with responsive design though check out Bootstrap, and especially its grid layout system.
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.
I've been trying the CSS photo gallery example here to set up my own (here is the code). Everything works fine except:
(1) The divs are setup using absolute measures in px. I find it frustrating to have to resize and adapt my photos to fit them. Instead, is there a way to setup up all the dimensions of the gallery (via the CSS), such as in % or em, so that the gallery adapts to the images I put in it, and also dynamically fit the viewport size of a browser?
(2) I tried to add my own photos to the gallery, yet if my photos' dimensions don't match that of the divs, they overflow. Is there a way to specify larger images to change their sizes to fill their containers, and maintain their aspect ratio?
Thanks.
(1) I would not set up the entire gallery in % or scale it dynamically to fit the browser. This can lead to unexpected results and problems. To fit the images into the divs you could set up a bash script with imagemagick to resize all your images. (May even your server can do this for you. If you are on Windows there are programs to batch-resize images like Shrink-O-Matic.)
(2) You can just set up a fixed hight or width (only one of them) to put the image in a fixed dimension. The browser will then scale the image to fit that value proportionally. The CSS would look like this:
#container .pics span img {height: 400px;}
That should work.
If you really want a gallery that "scales" to the browser size, may you have to look around for another one. There are thousands out there and it would be to much work to modify this one to your needs.
Good luck.