Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Full width image block


Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Which image blocks?

@paul2009 Hey, I don't want to be a bother but could you also help me with this please. I noticed that banner images don't adjust to mobile screens so I would like to make my image block full width.

Link to post

I'm using a 7.1 template 😕 I've tried using some codes to adjust the width but it wasn't making the image full width on both sides. 

Link to post

From what I can see on my 7.1 lab site, I just add a page, go to edit,  then choose the pencil icon, add image to background, not to a block,  set it for full bleed and it is full width with no border left or right. 

Edited by derricksrandomviews
Link to post

Hey! I changed it to a full gallery slideshow. It's the first picture on my home page. It's not responsive on all devices. It looks small like I want on a mobile device, but on an iPad and web screen its still to big. I used this code to adjust its size on mobile devices (portrait view):

@media screen and (max-width: 757px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}

I would like to change it to an image block and make it full width, but I want it to be responsive on all devices regardless of its screen size or the way you turn the device. Is this possible? 

Link to post
1 hour ago, Dee12 said:

Hey! I changed it to a full gallery slideshow. It's the first picture on my home page. It's not responsive on all devices. It looks small like I want on a mobile device, but on an iPad and web screen its still to big. I used this code to adjust its size on mobile devices (portrait view):

@media screen and (max-width: 757px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}

I would like to change it to an image block and make it full width, but I want it to be responsive on all devices regardless of its screen size or the way you turn the device. Is this possible? 

use this code for mobile + tablet

@media screen and (max-width: 767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}
@media screen and (min-width:768px) and (max-width:991px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 35vh !important;
}
}

 

Link to post

I changed it back to an image block because the full gallery slideshow was too much of a hassle to adjust to all screens. Could you help me make the image block full width please? It's the first picture on my homepage.

Link to post

I figured it out finally! The code I used:

#block-yui_3_17_2_1_1589941659268_22096.sqs-block.image-block {
    padding: 0px ! important;
  margin-top: -6.7% !important;
  margin-left: -3% !important;
  margin-right: -3% !important;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...