-
Posts
-
Hi there,
Getting along with my site very well. There’s just one lay-out thing I can’t figure out.
I want to create a lay-out for different room types like this: http://goo.gl/AYnvr .
Using the advanced lay-out editor this is what I get: http://goo.gl/TXcYL .
What I want to fix is:
– Text fields should be grey and the same height as the pictures.
– Text fiels should have a narrower margin between the pictures.
Hope you can help.
Support so far has been great! Thanks again!
Cheers
Hi,
I’ve been trying some things with CSS, using the following:
.el_after_av_one_half {
background-color: #f9f7f7;
height: 335px;
}
div .av_one_half {margin-left:1%; width:49%;}
.avia_textblock {
padding:20px}
On desktop version it works ok, but on iPad the fixed height causes trouble. The image crops, while the text block stays the same height. Besides, it obviously affects also all text blocks (e.g. on homepage etc). Hopefully you can provide me a more neat solution!
kind regards,
Nick
You can use the page id class if you just want to change the textblock styling on certain pages:
.page-id-2214 .el_after_av_one_half {
background-color: #f9f7f7;
height: 335px;
}
.page-id-2214 div .av_one_half {margin-left:1%; width:49%;}
.page-id-2214 .avia_textblock {
padding:20px}However I’m not aware of an easy solution for the images because if the width of the images shrinks the browser will also shrink the height of the images. Of course you could hardcode the height with:
.page-id-2214 .el_after_av_one_half img.avia_image {
height: 335px;
}but then the images will be distorted on smaller screens. On the other hand you can’t change the column height (eg reduce it on smaller screens) because then you don’t have enough space for the text content.
Thanks for your answer Peter.
I used media screens to alter the size of the text box for different resolutions.
The only thing I haven’t figured out: On iPad (portrait mode, 768 px) the text block is positioned next to the photo. In order to have a larger space for the text block, I would like to have the text block BELOW the picture (like on smaller screen resolution (<768px). I tried using:
@media screen and (max-width: 800px) {
div. av_one_half{
width: 70%;
}
}
But that didn’t work out. How do I get the text block below the picture, like on http://goo.gl/M2e6S (600 x 800)
Thanks!
Nick
Hi,
Maybe you can try this.
@media screen and (max-width: 800px) {
div. av_one_half{
clear: left;
}
}It will affect all one half column size.
Regards,
Ismael
Hi Ismael,
Unfortunately that didn’t work.
The second column only moves down, when <768px. On iPad portrait mode it still show the 2 columns next to each other..
Any other suggestions would be appreciated!! Thanks
Hi Hotelsolutio,
You can try putting the change inside ipad specific media queries:
/* iPads (landscape)
*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait)
*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}So that you it has the orientation: portrait or landscape and the change is specific there.
Regards,
Devin
Hi Devin,
Unfortunately still no changes.
I thought it would be an easy fix, but it turns out to be more complicated :). If you’ve any more suggestions please let me know. Meanwhile, I’ll try to figure out a different way of presenting the content in the portrait mode.
Thanks,
Nick
Hi,
You will need to play with this for a bit. first of all make sure you are not using any cache plugins. Turn them off. Then
Then start testing css
@media only screen and (min width: 767px) and (max width: 1000px){
div. av_one_half{
clear: left;
}
}Start changing those numbers , here is a page with many ipad queries and make sure to test them http://stephen.io/mediaqueries/
Thanks,
Nick
- The topic ‘Page Lay-out’ is closed to new replies.