I am quite a beginner at webdesign and I need some help with my webpage. I use wordpress / generate press template. On the desktop mode the 4 widgets in the footer are in a single line, but when I switch to tablet or mobile they are on top of each other. I already managed to change the font size of the text in the footer, but I still can't get the widgets in a single line for tablet and mobile. Can you please help me? Please try to explain in the simplest of terms as I am not that good yet :D Thank you!
Thank you I finally managed to find a way using the good old F12 command in the browser while checking my webpage. This command has helped me along the way with most issues I have had.
I used this code:
.inside-footer-widgets {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;}
Although I am not quite satisfied as the last, 4th widget's text does not align the content to the center.
On a tablet I found the look of the page untidy with all the widgets under each other, now it's better. For the mobile view I kept the stacking version.
Here is my website www.steelspiritdesigns.com
Related
On my website, http://reefbulk.shop/?page_id=1438, you can see 4 articles. They are normally lined up (as on the home page), but for some mysterious reason, they are not on some pages (such as page_id=1438).
I believe I can fix it with CSS, however adding a margin doesn't seem to help.
I hope someone here knows how to fix this infuriating issue. Last time I had it (on my other non-test site), I just made all the images the same dimensions. This has now failed in this new theme I'm using.
Asking the theme maker is no option as they give no support if your membership runs out (which it has).
You could display your articles as grids, using the following CSS on your articles.
display: grid;
align-content: space-between;
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;
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 :)
Website in question: s123c.github.io
Recently I started making a one page scrolling website as a side project and used a 'selector' portfolio. I also added a auto-scroll masthead.
I came across the issue of the next title (Side Projects) after the portfolio gallery sticking to the right side. I can't understand what triggered this happening as I can remember it working swell before.
Also #media queries have stopped working which is definitely related as the inline title "Side Projects" moves down as the window gets smaller. I feel as if the #media queries no longer work and the browser is automatically using default scaling.
Any advice appreciated (but please don't advise me to get Framework or Bootstrap. I'm aware of the options).
Not sure how the website is suppose to look but adding display: inline-block; to the id #portfoliolist is pushing that div down below all your thumbnails.
#portfoliolist {
display: inline-block;
}
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial