Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 30, 2015 at 7:27 pm #437727
    anton123

    Hi There,

    I had a problem that I thought was solved here:
    https://kriesi.at/support/topic/edge-to-edge-fullwidth-on-mobile-tablet-image-with-caption-in-grid-row/#post-432562

    The problem is that now all content in cells in a grid rows have no left / right margins when viewed as responsive.

    How do I apply the change only to Images (via the image page builder component) instead of text and text blocks and other elements?

    Thanks!

    May 4, 2015 at 12:15 pm #438845
    Andy

    Hey anton123!

    not sure what you mean exactly. Could you provide us screenshots showing what you want to achieve? you can use imgur.com or public dropbox link.
    Maybe you need this:

    .flex_cell.no_margin.av_one_fourth.avia-builder-el-2.el_before_av_cell_one_fourth.avia-builder-el-first.av-zero-padding {
margin: 10px !important;
}

    Regards,
    Andy

    May 4, 2015 at 12:35 pm #438852
    anton123
    This reply has been marked as private.
    May 5, 2015 at 5:54 am #439521
    Rikard

    Hey!

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
  width: 98%;
  max-width: 98%;
}
}

    Best regards,
    Rikard

    May 5, 2015 at 7:33 am #439541
    anton123

    Thanks, unfortunately this still affects all the contents of all the grid rows and with the 98% there are still gaps on the sides of the image blocks (Images with caption)

    There must be a css to target only the Images with caption to display edge to edge (not all the content in the grid row)?

    Thanks Again

    May 5, 2015 at 3:25 pm #439755
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.flex_cell_inner > .av-hotspot-image-container {
  padding: 0;
}
.flex_cell_inner > * {
  padding: 0 50px;
}}

    Cheers!
    Yigit

    May 12, 2015 at 10:16 am #442895
    anton123

    Hi there, sorry your second bit of css reverts everything back to the way it was?

    with the first bit of css ( width: 98%; max-width: 98%;) we get it close to the way it should look. But the problem is that the Images with caption blocks need to be 100% (edge to edge) and the rest of the content should have normal padding (with 98% they sit too close to the edge)

    In fact I had a look at the shop demo site on Responsinator and that page’s Images with caption blocks sit edge to edge?
    http://www.responsinator.com/?url=http%3A%2F%2Fkriesi.at%2Fthemes%2Fenfold-shop%2F

    I have taken out your css changes and when looking at my page on the Responsinator, they do not sit edge to edge?

    Why is this such a problem? or does Kriesi have special custom css for that demo to achieve the edge to edge look?

    May 14, 2015 at 2:25 pm #444282
    Yigit

    Hi!

    Do you mind creating a temporary admin login and posting it here privately?

    Best regards,
    Yigit

    May 14, 2015 at 3:01 pm #444306
    anton123

    Thanks – the test site is in a critical stage of design right now

    Will you be very very careful not to change anything? I can’t afford to have to spend time to fix stuff if you’ve accidentally broken settings or pages.

    May 14, 2015 at 3:03 pm #444307
    anton123
    This reply has been marked as private.
    May 16, 2015 at 6:14 am #445240
    Ismael

    Hi!

    Use this:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #collections .no_margin .flex_cell_inner {
  width: 100%;
  max-width: 100%;
}}

    In your custom css codes, I noticed that you are separating css media queries with the same width. For example: 

    @media only screen and (max-width: 767px) {
	.responsive #top .slideshow_caption .avia-caption-content {
		font-size: 15px !important;
	}}

    And this:

    @media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption h2 {
		font-size: 32px !important;
	}}

    You can combine them in a single media query:

    @media only screen and (max-width: 767px) {
	.responsive #top .slideshow_caption .avia-caption-content {
		font-size: 15px !important;
	}
	
	.responsive #top .slideshow_caption h2 {
		font-size: 32px !important;
	}
	
	#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
	  padding: 0px 20px;
	}
}

    CSS media queries usually go at the very bottom the css stylesheet.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.