- This topic has 4 replies, 3 voices, and was last updated 1 month, 4 weeks ago by
.
-
Posts
-
Hi,
I would want to make the featured main section wider on the mobile view.
Is this possible with CSS?
I tried to add the following as “Additional CSS”, but couldn’t get it to work (in a media query, where I have other additions that do work)..slider-feature-wrap, .featured-slider, .slick-list{
width: 100%;
}This is the site: https://stylelanka.lk
And here I have marked with yellow the part I want to “remove” and where the images should go all they way out: https://ibb.co/fkNQhyfMany thanks in advance!
Best Regards,
PushparajThanks for the quick reply!
Can you guide me in where I can find this?
Is it in style.css at row 1950?
Or is it in assets/js/custom.js at row 80?I just want this image to go all the way to the ends and be a bit larger in height.
Many thanks in advance!
Best Regards,
PushparajTo make the featured main section wider on mobile devices using CSS, you can use a media query to target devices with a smaller screen size. Here’s an example of how you could do this:
/* Default styles for the featured main section */
.featured-main {
width: 80%; /* or any other width */
/* Other styles */
}/* Media query to target mobile devices */
@media (max-width: 768px) {
/* Styles to apply on mobile devices */
.featured-main {
width: 90%; /* or any other width */
}
}This media query targets devices with a screen width of 768px or less and applies the styles inside the query to the .featured-main class. You can adjust the width of the .featured-main class inside the media query to make it wider on mobile devices as needed.
You can also use different units like vw (viewport width) or vh (viewport height) to make the element responsive.
/* Media query to target mobile devices */
@media (max-width: 768px) {
/* Styles to apply on mobile devices */
.featured-main {
width: 100vw;
}
}
This will make the featured main section 100% of the viewport width on mobile devices.Please let me know if you have any other questions.
- You must be logged in to reply to this topic.