I have a wordpress site which is responsive. In my home page there is a slider (responsive slider) Now i need to add some content below the slider with a small image and a one sentence description. There will be 3rows, in 1st row i need 3 images with 3 small descriptions , in 2nd and 3rd row 2images with descriptions. I need to make these responsive. Images and the small description should be responsive. I tried so many ways , but nothing works. Can anyone help me please?
Responsive layout design is 99.9% to do with your css and how you're writing it. Can you post any code examples? What theme are you using?
Some theme designers like Woothemes provide shortcodes for adding columns and rows of content that work responsively out of the box.
It's impossible to help any further until you provide more information :-)
Related
I am creating a gallery in a WordPress site and elementor PRO but I need the layout of the gallery to have different sizes. I mean in a section of 3 columns that a photo is square, the other vertically and horizontally, however when you click on the image you see the image with the measures it has.
I attach links of example
https://www.patricialopes.be/stills
I tried with the galleries provided by Elementor, but it doesn't give me the option to customize the layout.
I remain attentive and thank you!
José
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.
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.
sorry for asking as I hate asking questions but sometimes its the last resort.
I am pulling my hair out over here and I have read hundreds of pages over the weekend and just can't get my head around how to do achieve this.
I want to have a simple 4 column 'home' landing page for desktop and ipad (sub pages will revert to 2 columns - content and sidebar). When the user goes on to a iPhone I want the user to see 2 columns.
I have managed to either get the iphone to display a scaled down version of the 4 columns using the grid system or I have managed to get it displaying 1 column, neither of which help me.
I have attached an image of what I am trying to achieve if it helps but I would really appreciate if someone who has had some experience in this field to point me in the right direction as I just cant figure it out.
I am developing using wordpress and have tried bootstrap, responsive theme and bones and getting the same results with each. Each using a responsive fluid grid. I may be barking up the wrong tree but if someone could point me in the right direction I would appreciate it.
You need to use CSS media queries, based on screen size / device width.
This will allow your CSS to style the widths of columns on each device...
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Current versions of Adobe Dreamweaver now also support what are called "Fluid Grid Layouts" which are worth a look for this kind of issue. They are also very helpful for quickly solving inter-device layout issues. You can design easily for Mobile, Tablet, and Desktop in one interface!
I have a blog with main content and a sidebar. Most posts have photo galleries with 30+ photos. In the sidebar I display the thumbnails and a "more" link. By default I show 6 thumbnails. I would like to show up to all 30 if there was a enough content to make the sidebar long enough to support them.
I have found and come up with my own javascript solutions but I would really like to know if there is a CSS only method (even it requires not-fully-supported CSS techniques).
Maybe some kind of nth-child kind of thing?
Edit: I don't want to the sidebar to be longer than the content. That's why I'd only show more if the room was available.